Как стилизовать элемент option выбранного тега?

Question

Я пытаюсь установить стиль option в раскрывающемся меню select в Google Chrome.Работает во всех браузерах, кроме IE9 и Chrome.

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

<select name="color">
    <option class="red" value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Есть ли способ установить стиль для параметров в Google Chrome без использования JavaScript?После выбора цвет фона не отображается.

Answer 1

К сожалению, браузеры WebKit пока не поддерживают стилизацию тегов <option>, за исключением color и background-color.

. Наиболее широко используемым кросс-браузерным решением является использование <ul> / * 1007.* и стиль их с помощью CSS.Фреймворки вроде Bootstrap делают это хорошо.

Answer 2

Это выбор (из разработчиков браузеров или W3C, хотя я не могу найти спецификацию W3C о стилях выбора вариантов), не позволяющий стилизовать параметры выбора.

Я подозреваю, что это будет поддерживать согласованность с нативными списками выбора.
(подумайте, например, о мобильных устройствах).

3 решения приходят мне на ум:

• Использование Select2 , которое фактически преобразует ваши выборки в ul s (допускает много вещей)
• Разделите ваши select s на несколько, чтобы сгруппировать значения
• Разделить на optgroup

Answer 3

Начиная с версии 49+, Chrome поддерживает стилизацию элементов <option> с font-weight. Источник: https://code.google.com/p/chromium/issues/detail?id=44917#c22

Новое всплывающее окно SELECT: должен применяться стиль шрифта-веса.

Этот CL удаляет themeChromiumSkia.css. |!important| в нем помешало применить font-weight. Теперь html.css имеет |font-weight:normal|, и |!important| должно быть ненужным.

Была таблица стилей Chrome themeChromiumSkia.css, в которой все это время использовался font-weight: normal !important;. Он был представлен стабильному каналу Chrome в версии 49.0.

Answer 4

Я недавно обнаружил нечто, что, кажется, работает для стилизации отдельных элементов <option></option> в Chrome, Firefox и IE с использованием чистого CSS.

Возможно, попробуйте следующее:

HTML:

<select>
    <option value="blank">Blank</option>
    <option class="white" value="white">White</option>
    <option class="red" value="red">Red</option>
    <option class="blue" value="blue">Blue</option>
</select>

CSS:

select {
    background-color:#000;
    color: #FFF;
}

select * {
    background-color:#000;
    color:#FFF;
}

select *.red { /* This, miraculously, styles the '<option class="red"></option>' elements. */
    background-color:#F00;
    color:#FFF;
}

select *.white {
    background-color:#FFF;
    color:#000;
}

select *.blue {
    background-color:#06F;
    color:#FFF;
}

Странно, что делает осторожность с ветром. Кажется, он не поддерживает :active :hover :focus :link :visited :after :before.

Пример для JSFiddle: http://jsfiddle.net/Xd7TJ/2/

Answer 5

У меня есть обходной путь, использующий jquery ... хотя мы не можем стилизовать конкретную опцию, мы можем стилизовать саму выборку - и использовать javascript для изменения класса выбора на основе того, что выбрано.Это работает достаточно для простых случаев.

$('select.potentially_red').on('change', function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});
$('select.potentially_red').each( function() {
 if ($(this).val()=='red') {
  $(this).addClass('option_red');
 } else {
  $(this).removeClass('option_red');
 }
});

.option_red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- The js will affect all selects which have the class 'potentially_red' -->
<select name="color" class="potentially_red">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

Обратите внимание, что js состоит из двух частей, части each для правильной инициализации всего на странице, части .on('change', ... для ответаизменить.Мне не удалось преобразовать js в функцию, чтобы высушить ее, она почему-то ломается