CODEWITHSUNDEEP
htmlcssangular
pb4now
pb4now

Reputation: 1155

change color of selected option using css attribute selector?

I know how to achive that by writing a bit of code in typescript when (change) accures but I'm wondering what is the reason why this css code not working:

select[value="green"]{
  color:green;
}
select[value="red"]{
  color:red;
}

and the html example:

     <select class="custom-select">
        <option selected value="green" >my green option</option>
        <option value="red" >my red option</option>
     </select>

note: I don't mean color of text in dropdown menu itself but the color of text in select-space

Upvotes: 1

Views: 513

Answers (1)

P.S.
P.S.

Reputation: 16392

Because you should use option element for CSS, not select (it's parent element):

option[value="green"]{
  color:green;
}
option[value="red"]{
  color:red;
}
<select class="custom-select">
  <option selected value="green" >my green option</option>
  <option value="red" >my red option</option>
</select>

Upvotes: 3

Related Questions