Is there a way to style the currently selected <option> element in a <select> element?
I could then give a background color to the currently selected option element? That way I can style the option that's currently viewable in the closed dropdown.
the
:checkedpseudo-class initially applies to such elements that have the HTML4selectedandcheckedattributes
Source: w3.org
So, this CSS works, although styling the color is not possible in every browser:
option:checked { color: red; } An example of this in action, hiding the currently selected item from the drop down list.
option:checked { display:none; }<select> <option>A</option> <option>B</option> <option>C</option> </select>To style the currently selected option in the closed dropdown as well, you could try reversing the logic:
select { color: red; } option:not(:checked) { color: black; } /* or whatever your default style is */ 
Actually you can only style few CSS properties on :modified option elements. color does not work, background-color either, but you can set a background-image.
You can couple this with gradients to do the trick.
option:hover, option:focus, option:active, option:checked { background: linear-gradient(#5A2569, #5A2569); }<select> <option>A</option> <option>B</option> <option>C</option> </select>Works on gecko/webkit.
This worked for me :
select option { color: black; } select:not(:checked) { color: gray; }<select> <option>A</option> <option>B</option> <option>C</option> </select>
<select> element and another rule that matches the <option>s. The style that <option> inherits from <select> due to being its child gets overriden by <option>'s own style that you define. And I don't think that <select> can be :checked. So you're essentially just doing option { color: black; } select { color: gray; }, which may or may not be what the asker wanted.