在选择下设置选项的背景颜色

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>

Answer 2

您会看到一个空列表，因为option元素为空。您不能指望能够看到空白区域的背景。但你可以包括例如option元素中的不间断空格：

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

您可能仍然遇到某些浏览器的问题（option元素的样式有许多奇怪之处和浏览器差异，并且当前所选选项的背景和文本颜色往往由浏览器修复，而不是CSS -settable）。

但可能需要一种完全不同的方法。等待在一两年内实施<input type=color>时，您需要以不同方式设置颜色选择。有许多现有的库包含此类事物的代码，但它们往往存在可访问性问题。也许最简单的方法是简单地在一列中使用带有单选按钮的表，在另一列中使用颜色样本和对应的颜色名称。在这里，您还需要记住将一些内容（如不间断空间）设置到用于使用背景颜色呈现颜色样本的元素中。