How to change text color based on specific option?

Question

I want to change the first option's color to #ccc, others remain #000, but it doesn't work.Why? thanks. I don't wnat to use change function, which I think it's unnecessary.

something like this:

HTML:

  <select id="continent"> 
      <option value="-1">continent</option> 
      <option value="1">US</option> 
      <option value="2">UK</option> 
  </select>

JS:

$("#continent option[value='-1']").css('color','#ccc');

change function is necessary how will you know that option one is selected without the change function? — guradio, Jul 05 '17 at 08:24
add inline style but color will only be applied on the option ` ` — guradio, Jul 05 '17 at 08:27
did you tried `$("#continent option:first").css('color','#ccc');` ? — Milan Chheda, Jul 05 '17 at 08:27
Possible duplicate of [How do change the color of the select box's option text?](https://stackoverflow.com/questions/8635317/how-do-change-the-color-of-the-select-boxs-option-text) — lumio, Jul 05 '17 at 08:27
it will work only on option not after you selected it will show as black in the select — guradio, Jul 05 '17 at 08:32
you need a change function to apply the color to select and remove depending on the option selected — guradio, Jul 05 '17 at 08:33
what are you trying to do? Do you want it always to be `#ccc` or do you want the selected to be gray? — Dejan.S, Jul 05 '17 at 08:44

score 1 · Accepted Answer · edited Jul 05 '17 at 13:27

$("#continent").change(function(){
    $("#continent").val() == "-1" ? $("#continent").css("color", "red") : $("#continent").css("color", "blue");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="continent"> 
    <option value="-1">continent</option> 
    <option value="1">US</option> 
    <option value="2">UK</option> 
</select>

Remember to preset the color of the default option

ShuBham GuPta · Answer 2 · 2017-07-05T09:27:04.877

1

here is solution

$('.mySelect').change(function () {
     if($(this).find("option:selected").attr("value")==2){
    $(this).find('option:selected').css('color', 'red');
    }else{
     $(this).find('option:selected').css('color', 'blue');
    }

});

In above code i use .find() method which is used for select child of selected element try this code in fiddle

edited Jul 05 '17 at 09:27

answered Jul 05 '17 at 09:22

ShuBham GuPta

194
2
9

score 1 · Answer 3 · answered Jul 05 '17 at 09:26

Why do you want to use jQuery? This can be done with pure CSS.

#continent option {
  background-color: white; /* on XFCE the default background-color is #CCC! */
}

<select id="continent"> 
    <option value="-1" style="color:#cccccc">continent</option> 
    <option value="1">US</option> 
    <option value="2">UK</option> 
</select>

However you probably shouldn't do this, because it looks like the option was disabled, but it isn't. This is counterintuitive and against usability.

Apart from that, it looks different on other operating systems. This is how the snippet from above looks like on ubuntu with XFCE:

And this is what another solution looks like that also changes the color of the <select> to light gray if the 1st option is selected:

That's why you should either use <option value="-1" disabled> or another color.

How to change text color based on specific option?

3 Answers3