2

I am trying to change the text color of a SELECTED option in a Select menu and I cannot seem to get it to work. Below is my code. Any ideas? I only want to change the color once an option with a value has been selected... i.e. anything but the first option.

http://jsfiddle.net/wtedm8q9/

html:

<div class="row1-3home"> <select name="phone1" id="phone1"> <option value="">-- Select Phone Type --</option> <option value="Mobile">Mobile</option> <option value="Office">Office</option> <option value="Home">Home</option> </select> <select name="phone2" id="phone2"> <option value="">-- Select Phone Type --</option> <option value="Mobile">Mobile</option> <option value="Office">Office</option> <option value="Home">Home</option> </select> </div>

CSS: 

.row1-3 select, .row1-3home select { background:#FFF; font-size:12px; font-family:'Open Sans', sans-serif; width:94%; margin-left:3%; margin-right:3%; height:40px; line-height:40px; border:none; padding-left:10px; border-radius:none; margin-bottom:5px; -moz-appearance: none; } .row1-3 select option, .row1-3home select option { color:#01afd2; } .row1-3 select option:not(:checked), .row1-3home select option:not(:checked) { color:#9fa7b4; }
Improve this question

3 Answers 3

Reset to default
6

With a bit of jQuery, you can have it change color when someone changes the menu item.

Updated fiddle

jQuery

$("select").change(function() { $(this).css('color','red') })
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I don't think OP was referring to changing the background-color.
This works great! Thanks! Sometimes (with php) the select loads with an option already selected. In this case it doesn't work since there is no change for the jQuery to reference. Any idea how to get it to load blue if something other than the first option (with a value of "") is already selected via the php script? @BrianBennett
something like this? but this doesn't work if( $("select").val() != "" ) { $(this).css('color','red') }
An easier solution might be to set the default value as disabled so they can't switch back...or is that not an option? Here's an update: jsfiddle.net/wtedm8q9/29 @PaigeRoseFigueira
And not sure why that code isn't working for you. Here's another working fiddle with your solution (checking against the loaded ID) jsfiddle.net/wtedm8q9/31 @PaigeRoseFigueira
0

Remove the attribute value="" from the first options:

Updated Fiddle

<select name="phone1" id="phone1"> <option>-- Select Phone Type --</option> <option value="Mobile">Mobile</option>

And then add the attribute selector to the css rule:

.row1-3 select option[value]:checked, .row1-3home select option[value]:checked { color:#01afd2; }

PS: I took the liberty to change your selector. Instead of :not(:checked) , use a general style, and change the color only on checked ones...

Improve this answer

Comments

0

Please check this, you will need to use jQuery in order to exactly achieve what you're trying to do: jsFiddle.

jQuery:

jQuery('#phone1').change(function () { if (jQuery(this).children('option:first-child').is(':selected')) { jQuery("#phone1").css("color", "black"); jQuery("#phone1 option:checked").css("color", "black"); jQuery("#phone1 option:not(:checked)").css("color", "black"); } else { jQuery("#phone1").css("color", "#01afd2"); jQuery("#phone1 option:checked").css("color", "#01afd2"); jQuery("#phone1 option:not(:checked)").css("color", "black"); } }); jQuery('#phone2').change(function () { if (jQuery(this).children('option:first-child').is(':selected')) { jQuery("#phone2").css("color", "black"); jQuery("#phone2 option:checked").css("color", "black"); jQuery("#phone2 option:not(:checked)").css("color", "black"); } else { jQuery("#phone2").css("color", "#01afd2"); jQuery("#phone2 option:checked").css("color", "#01afd2"); jQuery("#phone2 option:not(:checked)").css("color", "black"); } });

With this jQuery, if the first option is selected, i.e. -- Select Phone Type --, its colour remains black but if you select any of the other options, their colour changes to #01afd2.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.