1

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

pb4now
  • 1,305
  • 4
  • 18
  • 45

1 Answers1

3

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>
P.S.
  • 15,970
  • 14
  • 62
  • 86
  • I guess I was unclear - I don't mean changing color of text in a drop down window I mean changing color of text in select-window depending on option selected- if U understan what I mean hehe:) – pb4now Apr 03 '18 at 09:16
  • 1
    @pb4now, ok, I understand now. I'm searching for solution, but as I know, it's not possible via pure HTML/CSS – P.S. Apr 03 '18 at 09:25
  • ok, strangely enough there is a 'value' attribute of – pb4now Apr 03 '18 at 09:36
  • 1
    @pb4now, looks like my suggestions were right and it's not possible. For example, here is an answer to similar question: https://stackoverflow.com/a/16345225/6053654. I also played around with some CSS trick such as `:has()`, `:parent`, `!` and so on, but with no luck. Sorry ( – P.S. Apr 03 '18 at 09:37
  • 1
    @pb4now, I tried the way with `value`, but yes, as you said, it doesn't work, works only with static value attribute, declared in HTML. `select` is a little more complex, than it looks – P.S. Apr 03 '18 at 09:43