Question

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?

Answer 1

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.