1

我找到了以下答案如何更改选择框选项背景颜色？但这对我不起作用。

我的 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);
}

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

像这样的东西

在此处输入图像描述

谢谢

4

2 回答 2

2

改为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>
于 2013-09-22T05:01:24.007 回答
0

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

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

某些浏览器可能仍然存在问题（option元素样式有很多奇怪之处和浏览器差异，并且当前选择的选项的背景和文本颜色往往是由浏览器固定的，而不是 CSS 可设置的）。

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

于 2013-09-22T05:36:31.680 回答