Come aggiungere un colore di sfondo all'opzione HTML?

Question

consideri il seguente esempio: (live demo)

HTML:

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

CSS:

option.a { 
    background-color: red; 
} 

In Windows in Chrome 17 opere di styling come previsto:

mentre su Mac in Chrome 17 non funziona:

Delle idee come aggiungere un colore di sfondo per <option> su Mac?

Answer 1

È un known bug in cromo. Gli stili non vengono applicati alle opzioni sul Mac.

Answer 2

Avete provato ad aggiungere! Importante come suggerito here?

Answer 3

Si prega di aggiungere questo file js nella pagina html e si chiama una classe "stile" (con lo stile è il nome della classe) sul tag. Dopo puoi gestire elegante selezione e tag opzionale.

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

});