change color of selected option using css attribute selector?

Question

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

Answer 1

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>