How to change the Color of the hovered Select-Opti

Question

I want to change the Color of the hovered Select-Option in FireFox which has default blue background and white foreground.

I tried:

<select name="select" size="1">
   <option>0</option>
   <option class="test">1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
</select>

.test:hover {
    color:green;
    background-color:yellow;
    text-decoration:underline;
}

But it doesn't work. See Example.
A FireFox specific solution is sufficient.

Answer 1

I think you may need to work with CSS combinators like this:

select>option.test:hover
{
    color: #1B517E;
    cursor: pointer;
}

Basically you are specifying this:

Parent > children . class : event

All children in select tags inside which options with the class ".test" will have the style specified in brackets.

IMPORTANT: It works on Firefox, but not in Chrome.

Here's a reference can help you: http://www.w3schools.com/css/css_combinators.asp

Answer 2

I found out that I can set an Image as Backround.

jsfiddle demo

But it is only painted on :hover, when I exit the mouse from the option it will by system rendered.

Answer 3

SELECT elements are rendered by the OS, not HTML. You cannot style this element.

You can use a HTML+CSS replacement using JavaScript to simulate SELECT though.

Answer 4

It cannot be done with CSS alone. I recommend a jQuery + Chosen plugin replacement for the <select>