Как добавить цвет фона в HTML-вариант?

Question

Рассмотрим следующий пример: (live demo)

HTML:

<select>       
    <option>Hello</option>  
    <option>Stack</option> 
    <option class="a">Overflow</option> 
</select> 

CSS:

option.a { 
    background-color: red; 
} 

В Windows в Chrome 17 формирующей работы, как и ожидалось:

в то время как на Mac в Chrome 17 он не работает:

Любые идеи, как добавить цвет фона <option> на Mac?

Answer 1

Это known bug в хромированном состоянии. Стили не применяются к параметрам на Mac.

Answer 2

Вы пытались добавить! Важно как предложено here?

Answer 3

Пожалуйста, добавьте этот файл js на html-страницу, и вы вызываете класс «styled» (styleled is class name) на теге. После того, как вы сможете управлять стильным тегом select и option.

(function($){ 
$.fn.extend({ 

    customStyle : function(options) { 
     if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){ 
     return this.each(function() { 

      var currentSelected = $(this).find(':selected'); 
      $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')}); 
      var selectBoxSpan = $(this).next(); 
      var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));   
      var selectBoxSpanInner = selectBoxSpan.find(':first-child'); 
      selectBoxSpan.css({display:'inline-block'}); 
      selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'}); 
      var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom')); 
      $(this).height(selectBoxHeight).change(function(){ 
       selectBoxSpanInner.text($(this).val()).parent().addClass('changed'); 
      }); 

     }); 
     } 
    } 
}); 
})(jQuery); 


$(function(){ 

$('select.styled').customStyle(); 

});