0

I am trying to achieve something with pure CSS that I am not sure is possible after some searching. I need to have a select element that is styled different once an option has been selected. The style is not reliant upon any particular option, just an option. Here is my dropdown:

<div>
    <select id="select_element" name="select_name">
        <option hidden disabled selected value=""></option>
        <option value="option">Option 1</option>
        <option value="option">Option 2</option>
        <option value="option">Option 3</option>
    </select>
    <label for="select_element">Question for select?</label>
</div>

How can I properly target the select element once an option has been selected? I am trying to apply different styles for the select in its base state and once an option has been selected. Any help would be greatly appreciated!

develpr
  • 1,296
  • 4
  • 22
  • 42
  • See https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option and scroll down for an answer with a tiny bit of js ('hold my beer'). – Michael Durrant Sep 18 '20 at 15:25
  • 1
    Does this answer your question? [Style – Michael Durrant Sep 18 '20 at 15:26
  • The title of the linked question is "Style – Michael Durrant Sep 18 '20 at 15:27
  • Aside from that it is a great question. Just has been asked before. – Michael Durrant Sep 18 '20 at 15:28
  • selector level 4 specification define has() but it could be that is not already implemented https://drafts.csswg.org/selectors-4/#relational – Lety Sep 18 '20 at 15:44

1 Answers1

1

You can't, you need to use js...

matte rez
  • 33
  • 4