Изменение цвета выпадающего списка при закрытии

Question

С помощью CSS я могу задать цвет шрифта и фона для отдельных вариантов выпадающего списка «выбрать»; однако эти цвета отображаются только в фактическом выпадающем списке. Цвета, показанные в поле на странице, когда список не открыт, по-прежнему являются значениями по умолчанию.

В настоящее время у меня есть список со многими выпадающими списками, имеющими несколько вариантов, и было бы полезно иметь возможность раскрашивать каждый вариант, чтобы выбор сразу был очевиден. Преобразование на радиокнопках или другом входе не представляется возможным. (Мои клиенты довольно требователен :-p.)

Answer 1

IE получает это право, если это утешит;)

Вам потребуется некоторое JavaScript для того, чтобы работать в других браузерах:

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
    <option style="background-color:yellow">Item 1</option> 
    <option style="background-color:lightyellow">Item 2</option> 
</select> 

Даже лучше с именами классов CSS:

<select 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="important"> 
    <option class="important" selected="selected">Item 1</option> 
    <option class="sorta-important">Item 2</option> 
</select> 

И ваш CSS:

.important { background-color:yellow; } 
.sorta-important { background-color:lightyellow; } 

Таким образом, вы сохраняете свои данные презентации отдельно и ваши имена классов значимыми.

Answer 2

Я сделал это в JQuery:

<select id="ddlColors" style="background-color: White;"> 
    <option style="background-color: Aqua;">1</option> 
    <option style="background-color: Blue;">2</option> 
    <option style="background-color: Fuchsia;">3</option> 
    <option style="background-color: Gray;">4</option> 
</select> 
<script> 
    $("select").change(function() { 
     $("select").css("background-color", $("select option:selected").css("background-color")); 
    }) 
    .change(); 
</script>