How to change the Color of the hovered Select-Option in FireFox
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.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.
It cannot be done with CSS alone. I recommend a jQuery + Chosen plugin replacement for the <select>
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.
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
精彩评论