html - 设置选择下选项的背景颜色

Question

我找到了以下答案 How to change select box option background color?但它对我不起作用。

我的 html 文件中有以下列表

<select>
<option value="item 1" ></option>
<option value="item 2" ></option>
<option value="item 3"></option>
</select>

和下面的CSS

select option[value="item 1"]{
    background: rgba(100,100,100,0.3);
}

但我仍然得到一个没有背景颜色的空列表。我想要得到的是某种只有颜色没有文本的下拉列表

像这样

谢谢

Answer 1

改为使用 nth-child() :

select option:nth-child(1) {
    background: rgba(100,100,100,0.3);
}

然后您也不需要在每次更改选项值时都更改 CSS。

---

编辑 - 我想你会的

select option:nth-child(1) {
    background: red;
}
select option:nth-child(2) {
    background: yellow;
}
select option:nth-child(3) {
    background: green;
}

<select>
<option value="item 1">&nbsp;&nbsp;</option>
<option value="item 2">&nbsp;&nbsp;</option>
<option value="item 3">&nbsp;&nbsp;</option>
</select>