Как добавить цвет фона для опции HTML? - PullRequest
5 голосов
/ 03 марта 2012

Рассмотрим следующий пример: ( живая демонстрация )

HTML:

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

CSS:

option.a {
    background-color: red;
}

В Windows в Chrome17 стиль работает должным образом:

enter image description here

, а на Mac в Chrome 17 он не работает:

enter image description here

Любойидеи, как добавить цвет фона для <option> на Mac?

Ответы [ 3 ]

4 голосов
/ 03 марта 2012

Это известная ошибка в Chrome.Стили не применяются к параметрам на Mac.

0 голосов
/ 21 апреля 2012

Пожалуйста, добавьте этот js-файл на свою html-страницу, и вы вызовете класс «styleled» (styleled is name name) для тега.После вы можете управлять стильным выбором и тегом опции.

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

});
0 голосов
/ 03 марта 2012

Вы пробовали добавить! Важный, как предлагалось здесь ?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...