How to change the Color of the hovered Select-Option in FireFox

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

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 2

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