How to add a background color to HTML option?

Question

Consider the following example: (live demo)

HTML:

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

CSS:

option.a {
    background-color: red;
}

On Windows in Chrome 17 the styling works as expected:

while on Mac in Chrome 17 it doesn't work:

Any ideas how to add a background color to <option> on Mac?

Answer 1

It's a known bug in chrome. Styles don't get applied to options on the Mac.

Answer 2

Please add this js file in your html page and you call a class "styled"(styled is class name) on tag . After you can manage stylish select and option tag .

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

});

Answer 3

Have you tried adding !important as suggested here?