Change color of selected option in html select input

Question

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;
}

score 6 · Accepted Answer · answered Oct 15 '14 at 21:05

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')
})

answered Oct 15 '14 at 21:05

Brian

4,274
2
27
55

1

I don't think OP was referring to changing the `background-color`. – Fahad Hasan Oct 15 '14 at 21:07
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 – Paige Rose Figueira Oct 15 '14 at 23:20
something like this? but this doesn't work `if( $("select").val() != "" ) { $(this).css('color','red') }` – Paige Rose Figueira Oct 15 '14 at 23:49
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: http://jsfiddle.net/wtedm8q9/29/ @PaigeRoseFigueira – Brian Oct 16 '14 at 12:42
And not sure why that code isn't working for you. Here's another working fiddle with your solution (checking against the loaded ID) http://jsfiddle.net/wtedm8q9/31/ @PaigeRoseFigueira – Brian Oct 16 '14 at 12:48

score 0 · Answer 2 · answered Oct 15 '14 at 21:08

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...

Fahad Hasan · Answer 3 · 2014-10-15T21:46:42.047

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.

Change color of selected option in html select input

3 Answers3

Updated fiddle