Làm cách nào để thêm màu nền vào tùy chọn HTML?

Question

Hãy xem xét ví dụ sau: (live demo)

HTML:

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

CSS:

option.a { 
    background-color: red; 
} 

Trên Windows trong Chrome 17 tác phẩm tạo kiểu tóc như mong đợi:

trong khi trên Mac trong Chrome 17 nó không hoạt động:

Bất kỳ ý tưởng làm thế nào để thêm một màu nền để <option> trên Mac?

Answer 1

Đây là một known bug trong chrome. Kiểu không được áp dụng cho các tùy chọn trên máy Mac.

Answer 2

Bạn đã thử thêm quan trọng như được đề xuất here?

Answer 3

Vui lòng thêm tệp js này vào trang html của bạn và bạn gọi một lớp "có kiểu" (theo kiểu là tên lớp) trên thẻ. Sau khi bạn có thể quản lý thẻ tùy chọn và lựa chọn phong cách.

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

});