CODEWITHSUNDEEP
csscss-selectors
agente_secreto
agente_secreto

Reputation: 8079

Problem styling Option[selected] in a select field

I have a select box in which it is very important that the background for each option has a specific color. The problem is that the select box is clicked, the selected option appears blue (same as the selected text color).

I've tried using a lot of selectors (:active, :focus, ::selection, [selected]) and I cannot find the way to change this behaviour. Any idea?

I guess this can be done with js, but there must be a CSS selector that works, right?

see what i mean?

Upvotes: 1

Views: 860

Answers (2)

thirtydot
thirtydot

Reputation: 228142

To my knowledge, CSS cannot help you with this. If this is "very important" to you, I think your only choice is to swap out the <select>s with JavaScript ones.

These ones look good:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Upvotes: 1

BoltClock
BoltClock

Reputation: 723388

Unfortunately, no, there isn't a dynamic CSS pseudo-class that changes selection depending on which option is selected. option[selected] only matches whichever options have the selected attribute as defined by the markup.

Upvotes: 1

Related Questions