5

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.

oliholz
  • 7,447
  • 2
  • 43
  • 82
  • It seems you cannot do that Check this out http://stackoverflow.com/questions/1667086/changing-select-highlight-color – shashi Aug 11 '11 at 14:34
  • Unfortunately, you Just Can't Do It. – thirtydot Aug 11 '11 at 14:54
  • possible duplicate of [Change Select List Option background colour on hover](http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) – doppelgreener May 01 '15 at 07:22

4 Answers4

7

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Why does `text-decoration:underline;` work? And a global Select-Color change works also for the options. – oliholz Aug 11 '11 at 14:32
  • +1 same idea and quicker than me. I was searching through my bookmarks to find the plugin link! – andyb Aug 11 '11 at 14:33
  • 1
    SEELCT is probably one of the largest inconsistencies in CSS. Some browsers have allowed some styling, but there is no standard. See: http://stackoverflow.com/questions/1072239/is-it-possible-to-style-a-select-box – Diodeus - James MacFarlane Aug 11 '11 at 15:06
2

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

andyb
  • 43,435
  • 12
  • 121
  • 150
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.

Bakudan
  • 19,134
  • 9
  • 53
  • 73
oliholz
  • 7,447
  • 2
  • 43
  • 82
-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

Dani
  • 9
  • 1