¿Cómo agregar un color de fondo a la opción HTML?

Question

Consideremos el siguiente ejemplo: (live demo)

HTML:

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

CSS:

option.a { 
    background-color: red; 
} 

En Windows en Chrome 17 las obras de estilo como se esperaba:

, mientras que en Mac en Chrome 17 no funciona:

Alguna idea de cómo añadir un color de fondo a <option> en Mac?

Answer 1

Es un known bug en cromo. Los estilos no se aplican a las opciones en la Mac.

Answer 2

¿Ha intentado agregar! Importante como se sugiere here?

Answer 3

Agregue este archivo js en su página html y llame a una clase "estilo" (estilo es nombre de clase) en la etiqueta. Después de que pueda administrar la etiqueta elegante de selección y opción.

(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(); 

});