Отказ изменить Backgound-цвет «опции» внутри HTML «выберите» тег

Question

У меня есть select HTML тег, и я хочу background-color из option чередовать между рядами, и ниже мой попробовать

<select name="j_idt8:j_idt13" size="1">  
    <option value="value1" class="option1">label1</option> 
    <option value="value2" class="option2">label2</option> 
    <option value="value3" class="option1">label3</option> 
    <option value="value4" class="option2">label4</option> 
    <option value="value5" class="option1">label5</option> 
</select> 

option.option1 { 
    background-color: #ccc; 
} 

option.option2 { 
    background-color: #fcc; 
} 

Эта работа только с FF, но не работающая с Chrome и сафари, может ли помочь мне понять, как гуру CSS помогает мне понять это? Я также добавляю jsfiddle, поэтому вы можете просто открыть их между разными браузерами.

http://jsfiddle.net/cYEE2/

Примечание: Chrome: 20.0.1132.47
Safari: 5.1.7
Firefox: 13.0.1

Answer 1

Будучи в состоянии использовать CSS, чтобы изменить форматирование отдельных элементов OPTION в Элемент SELECT, к сожалению, зависит от браузера. Ваш CSS выше не будет работать в некоторых браузерах.

Есть CSS-дружественные альтернативы элементу SELECT, который вы можете использовать, например. Плагины jQuery.

Answer 2

Окрашивание выбора параметров не поддерживается во всех браузерах и даже там, где она есть, как правило, проблемы с отступов и т.д.

Мой совет просто использовать его в браузерах, которые поддерживают его (Firefox полностью, Chrome частично, но игнорирует paddings и Safari) и забыть об этом в тех, которые этого не делают.

Другие браузеры просто не поддерживают эту опцию.