How to change the Color of the hovered Select-Opti

问题:

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.

回答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.

回答2:

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

回答3:

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.

回答4:

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