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

【问题标题】：setting the background color of a option under select在选择下设置选项的背景颜色
【发布时间】：2013-09-22 13:36:31
【问题描述】：

我找到了以下答案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);
}

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

类似的东西

谢谢

【问题讨论】：

这很好用，只需将选择移动到不同的选项，您会看到第一个元素是灰色的，要获得图像显示的内容，您需要使用 html/ 制作自定义选择框css/javascript
对我不起作用:(也许这不是我想要的？因为我的图像表明我有点想总是在下拉菜单中看到颜色
正如我所提到的，要获得您想要的内容，您无法使用常规选择输入框执行操作，您需要使用 div 或 ul/li 列表或其他 html 元素创建自定义选择框并设置它们的样式使用 css 并使用 javascript 使其发挥作用。
你能给我一些关于如何实施这样一个解决方案的指导吗？

标签： html css

【解决方案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>

【讨论】：

正如帕特里克所说，这可能不适用于我正在寻找的东西

【解决方案2】：

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

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

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

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

【讨论】：