Html 在“选择”下设置选项的背景色

我找到了下面的答案，但它对我不起作用

我的html文件中有以下列表

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

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

像这样的

谢谢

请选择

n-child（）

：

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

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

---

编辑-我想你会的

选择选项：第n个子项（1）{
背景：红色；
}
选择选项：第n个子项（2）{
背景：黄色；
}
选择选项：第n个子项（3）{
背景：绿色；
}

---

您会看到一个空列表，因为

选项

元素为空。您不能期望能够看到空白区域的背景。但您可以在

选项

元素中包括一个不间断空格：

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

某些浏览器可能仍然存在问题（

选项

元素的样式有许多奇怪之处和浏览器差异，当前所选选项的背景和文本颜色往往是由浏览器固定的，而不是CSS可设置的）

---

不过，可能需要一种完全不同的方法。在等待

在十年或二十年内实现时，您需要以不同的方式设置颜色选择。有许多现有的库包含这类代码，但它们往往存在可访问性问题。也许最简单的方法是构造一个简单的表格，在一列中使用单选按钮，在另一列中使用颜色样本和相应的颜色名称。在这里，您也需要记住在元素中设置一些内容，如无分隔符，以使用背景色显示颜色样本。

这很好，只需将选择移动到其他选项，您就会看到第一个元素是灰色的，要获得图像显示的内容，您需要制作一个自定义选择框，使用html/css/JavaScription不适合我：（也可能这不是我要找的？正如我的图片所展示的，我有点想在下拉列表中看到颜色，正如我提到的，要得到你想要的东西，你不能用常规的选择输入框，你需要用div或ul/li列表或其他html元素创建一个自定义的选择框，并用css和javascript对它们进行样式化你能给我一些关于如何实现这样一个解决方案的建议吗？正如帕特里克所说，这可能对我所寻找的不起作用

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