Установить цвет элемента HTML в google chrome

Question

Я пытаюсь отобразить выпадающий список в HTML. Мне удалось сделать это легко в Internet Explorer, но у меня проблема, когда я использую его на Google Chrome.

Я создаю следующий CSS для фонового цвета вариантов в выберите тег:

option.red{background-color: #FF0000;} 
option.green{background-color: #00FF00;} 
option.blue{background-color: #0000FF;} 

Затем в моем выберите тег, я

<option class="red" value="red" selected="selected" >blabla</option> 
<option class="green" value="green">blabla</option> 
<option class="blue" value="blue">blabla</option> 

В Google Chrome, фон цвет вариантов работает хорошо, первый вариант - тот, который выбран по умолчанию (я знаю это из-за отпечатков), но цвет фона элемента выбора белый.

Это странно, потому что он только делает это на Google Chrome

Если кто-нибудь знает, как установить цвет выбора пункта к цвету его выбранного цвета вариант, это было бы здорово

Спасибо

Answer 1

Основываясь на existing answer, вы можете попробовать это:

var sel = document.getElementById('select_id'); 
sel.addEventListener('click', function(el){ 
    var options = this.children; 
    for(var i=0; i < this.childElementCount; i++){ 
     options[i].style.color = 'gray'; 
    } 
    var selected = this.children[this.selectedIndex]; 
     selected.style.color = 'red'; 
    }, false); 

JSBin example also available.