如何將背景顏色添加到HTML選項？

HTML：

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

CSS：

option.a { 
    background-color: red; 
}

在Windows上的Chrome 17的造型作品如預期：

enter image description here

，而在Mac上的Chrome 17這是行不通的：

enter image description here

任何想法如何將背景顏色添加到<option>在Mac？

來源

2012-03-03 Misha Moroshko

這是在Chrome瀏覽器known bug。樣式不適用於Mac上的選項。

來源

2012-03-03 02:35:44 Kibbee

您是否嘗試過加入！重要的建議here？

來源

2012-03-03 02:33:30 fbernardo

[這沒有幫助]（http://jsfiddle.net/BWhZf/9/）。 – Ashe 2012-03-03 07:02:23

請加上這個js文件在你的HTML頁面，你調用一個類「病急亂投醫」（風格是類名）的標籤。當你可以管理時尚的選擇和選項標籤。

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

});

來源

2012-04-21 06:38:39 ShibinRagh

如何將背景顏色添加到HTML選項？

回答

相關問題