Как изменить цвет скрытой опции выбора в FireFox

Question

Я хочу изменить цвет скрытой опции выбора в FireFox, у которой по умолчанию синий фон и белый передний план.

Я пытался:

<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;
}

Но это не работает. См. Пример .
Достаточно специфического решения для FireFox.

Answer 1

SELECT элементы отображаются операционной системой, а не HTML. Вы не можете стилизовать этот элемент.

Вы можете использовать замену HTML + CSS, используя JavaScript для имитации SELECT.

Answer 2

Я обнаружил, что могу установить изображение в качестве фона.

jsfiddle demo

Но это только на: hover, когда я выхожу из опции, которая будет отображаться системой.

Answer 3

Это невозможно сделать только с помощью CSS. Я рекомендую jQuery + Выбранный плагин для замены <select>

Answer 4

Я думаю, что вам, возможно, понадобится работать с такими комбинаторами CSS:

select>option.test:hover
{
    color: #1B517E;
    cursor: pointer;
}

В основном вы указываете это:

Родитель> дети. класс: событие

Все дочерние элементы в тегах select, внутри которых параметры с классом ".test" будут иметь стиль, указанный в скобках.

ВАЖНО: Работает в Firefox, но не в Chrome.

Вот ссылка, которая может вам помочь: http://www.w3schools.com/css/css_combinators.asp