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

html css css-selectors pseudo-class
Web_Designer picture Web_Designer · Dec 23, 2011 · Viewed 189.3k times · Source

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.

Answer

Emmett picture Emmett · Dec 23, 2011

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 */

Related questions

CSS Pseudo-classes with inline styles

Is it possible to have pseudo-classes using inline styles? Example: <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> I know the above HTML won't work but is there something similar that will? …

Read More
CSS3 pseudo class not first and last child

I have some following HTML code: <ul> <li>number 1</li> <li>number 2</li> <li>number 3</li> <li>number 4</li> <li>…

Read More
Is there a CSS ":drop-hover" pseudo-class?

Saying I have an input type="file" field. One can drop a file on this input(like in Firefox) instead of clicking "browse" and selecting the file. Now, I want to customize it a bit, by changing the field's background …

Read More