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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Новое SELECT Popup: стиль шрифта-веса должен быть применен.

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

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

Ответ 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/

Ответ 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>