0

I have one option in a select with a color to indicate importance. it is red on the dropdown menu, but when it is selected it is black again. Is there a way to keep it red when it has been selected? Here is jsFiddle to demonstrate. Thanks.

#red{color:red;}

<select>
  <option>normal</option>
  <option id = "red">important</option>
  <option>normal</option>  
</select>
Nikunj Madhogaria
  • 2,139
  • 2
  • 23
  • 40
user2014429
  • 2,497
  • 10
  • 35
  • 49
  • If you want the text in your select box to be red, you have to describe the style for it separately, and if you want specific css for specific options, you need to use javascript/jquery – Nikunj Madhogaria Jan 30 '15 at 21:00
  • Here's a demo: http://jsfiddle.net/3v4wfa00/2/ Add the necessary tags in your question. – Nikunj Madhogaria Jan 30 '15 at 21:05

3 Answers3

2

you can use javascript to change select color depended on value.

Here is jsFiddle with example

$('#select').on('change', function(){
    if($(this).val() === 'important'){
        $(this).addClass('red')
    }
})
vadim.zhiltsov
  • 9,294
  • 2
  • 15
  • 16
1

i used an onchange event, idk if you want to do it that way, but its an option. essentially, this is switching classes to the option that is selected's class, and thus changing its color

.greenText{ color:green; }

.blueText{ color:blue; }

.redText{ color:red; }
<select
    onchange="this.className=this.options[this.selectedIndex].className"
    class="greenText">
     <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>
indubitablee
  • 8,136
  • 2
  • 25
  • 49
0

You can also use JQuery.

$("select").change(function(){
    $(this).css("color", $(this).children("option:selected").css("color")); 
});

check this Full view

J Prakash
  • 1,323
  • 8
  • 13