Изменение цвета SELECT на основе ВАРИАНТА Выбрано

Question

У меня есть HTML5 <select> с несколькими детьми <option>, где каждый <option> имеет свои собственные цвета заднего и заднего плана. Это делается через CSS и достаточно просто.

Что я хотел бы сделать, так это поддерживать цвет <option> в <select> после того, как был выбран <option>. Например, предположим, что у меня есть это (я не использую CSS в простом примере, приведенном ниже, но в моей реальной среде я):

<select> 
    <option style="color:red">ABC</option> 
    <option style="color:blue" selected>DEF</option> 
    <option style="color:green">GHI</option> 
</select> 

Я хотел бы использовать CSS, чтобы как-то «передача» обратно и передними цветами выбранных <option> до <select>, так что цвет <select> всегда синхронизируется с цветом выбранного <option>. Если пользователь выбирает третий вариант в моем примере, он должен быть зеленым, если он выбран. Выбор первого варианта, и текст отображается красным. Когда изначально отображается <select>, он должен иметь цвета задней и переднего плана начального <option> (синий передний план, в приведенном выше примере).

Я могу сделать это через jQuery, но я бы предпочел использовать CSS, но я чувствую, что это, вероятно, невозможно.

Answer 1

У меня есть решение. Я доволен предоставленным jsfiddle. Одно из предостережений состоит в том, что каждый <option> должен иметь цвет фона, установленный явно (он не может наследовать от <select>, так как <select> изменит свой фоновый цвет при изменении выбранных <option>).

UPDATE К сожалению, это «решение» работает только в Chrome и Opera. Так много для совместимости браузера.

https://jsfiddle.net/herm0xvb/1/

Answer 2

Вы должны вручную получить CLASS и цвет от выбранного элемента опции

$(document).ready(function(){ 
    $('select').change(function() { 
     var opt = $(this)[0].options[$(this)[0].selectedIndex]; 
    $(this)[0].style.backgroundColor = opt.style.backgroundColor; 
    $(this)[0].className = opt.className; 
    }); 
});