Вот несколько способов стиля <option>вместе с<select> , если вы используете Bootstrap и / или JQuery. Я понимаю, что это не то, о чем просит оригинальный постер, но я подумал, что смогу помочь другим, кто наткнется на этот вопрос.
Вы все еще можете достичь цели стилизации каждого из них по <option>отдельности, но, возможно, придется применить некоторый стиль к ним <select>. Моя любимая библиотека - Bootstrap Select, упомянутая ниже.
Bootstrap Select Library (jquery)
Если вы уже используете bootstrap, вы можете попробовать библиотеку Bootstrap Select или библиотеку, указанную ниже (поскольку она имеет тему начальной загрузки).
Обратите внимание, что вы можете стилизовать весь selectэлемент илиoption элементы отдельно.
Примеры :
Зависимости : требуется jQuery v1.9.1 +, Bootstrap , компонент dropdown.js Bootstrap и CSS Bootstrap
Совместимость : не уверена, но bootstrap заявляет, что «поддерживает последние стабильные выпуски всех основных браузеров и платформ»
Демо : https://developer.snapappointments.com/bootstrap-select/examples/
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
Select2 (JS lib)
Есть библиотека, которую вы можете использовать, называется Select2 .
Зависимости : Библиотека только JS + CSS + HTML (не требует JQuery).
Совместимость : IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Демо : https://select2.org/getting-started/basic-usage
Также есть тема начальной загрузки доступна .
Нет примера начальной загрузки:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
Пример начальной загрузки:
$(function() {
var $select = $('.select2');
$select.select2({
theme: 'paper'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<select class="select2 form-control" placeholder="Country">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
MDBootstrap ($ & Bootstrap & JQuery)
Если у вас есть дополнительные деньги, вы можете воспользоваться премиальной библиотекой MDBootstrap . (Это целый комплект пользовательского интерфейса , поэтому он не легкий)
Это позволяет стилизовать элементы select и option с использованием дизайна Material .
Есть бесплатная версия, но она не позволит вам использовать симпатичный дизайн Material!
Зависимости : Bootstrap 4 , JQuery,
Совместимость : «поддерживает последние стабильные выпуски всех основных браузеров и платформ».
Демонстрация : https://mdbootstrap.com/docs/jquery/forms/select/#color
