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

P.S. · Accepted Answer · 2018-04-03 09:04:15Z

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>

answered Apr 3, 2018 at 9:04

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

pb4now Over a year ago

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:)

P.S. Over a year ago

@pb4now, ok, I understand now. I'm searching for solution, but as I know, it's not possible via pure HTML/CSS

pb4now Over a year ago

ok, strangely enough there is a 'value' attribute of <select> that changes with changing of option - but it exist under 'target' so I thought that maybe I should put something like that in css [target.value="green"] put that is not alowed syntax in css :s P.s if U put value="green" programaticly in select-tag then that css code works:S

P.S. Over a year ago

@pb4now, looks like my suggestions were right and it's not possible. For example, here is an answer to similar question: 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. Over a year ago

@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

Collectives™ on Stack Overflow

change color of selected option using css attribute selector?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related