CSS :selected pseudo class similar to :checked, but for elements

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.

4 Answers

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

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; } 

The css from the accepted answer also doesn't work for me. But this inline style works. Tested on Firefox 86 and Chrome 88.

<select> <option value="1" selected>One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>