开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜