Изменение цвета фона в выпадающем списке опций выбора

Я создаю форму с помощью 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 выпадающих значения.

Вернуться на верх