Изменение цвета фона в выпадающем списке опций выбора
Я создаю форму с помощью django. Одно из полей формы представляет собой select с опциями.
Поле формы:
{{ form.work }}
Варианты выбора после рендеринга следующие:
<select name="work" class="form-control" required="" id="id_work">
<option value="" selected="">---------</option>
<option value="chair">The chair</option>
<option value="table">The table</option>
</select>
Как я могу изменить цвет фона для каждого из значений? Чтобы при нажатии на стрелку выпадающего списка я видел все значения с разными цветами.
Я использовал css, но безуспешно.
select option[value="chair"] {
background-color: red !important;
}
select option:nth-child(2) {
background: red;
}
В качестве примечания, форма состоит из различных полей с опциями выбора. Я использую bootstrap 4.
Спасибо
Для второго стиля нужно использовать nth-of-type
. Но только в качестве CSS это работает:
select option[value="chair"] {
background-color: red;
}
select option:nth-of-type(3) {
background: green;
}
<select name="work" class="form-control" required="" id="id_work">
<option value="" selected="">---------</option>
<option value="chair">The chair</option>
<option value="table">The table</option>
</select>
Вы можете установить некоторый флаг, если есть только 2 выпадающих значения.