在选择选项下拉列表中更改背景颜色

Question

我正在使用 django 渲染一个表单。表单中的一个字段是带有选项的选择。

渲染表单域：

{{ 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;
}

请注意，表单由带有选择选项的不同字段组成。我使用引导程序 4。

谢谢

Answer 1

对于第二种样式，您需要使用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>

Answer 2

如果只有 2 个下拉值，您也可以设置一些标志。