Question

显然，这不像我预期的那样简单，但是我试图在选择框中为某些选项添加颜色。这些选项实际上是动态的，但是，与该问题无关，我将仅发布HTML。我不太在乎背景还是仅更改文本颜色，但是我似乎根本什么都没有改变！我正在Linux Ubuntu Firefox中进行测试，但最终将需要它在iOS Safari上运行。

在CSS文件中：

.ColorRed {
    background: red;
}

.ColorGreen {
    background: green;
}

形式：

<select name="Storage" id="Storage">
    <option value=""></option>
    <option value="40">SV-COUNTER</option>
    <option value="8">SV-C1-B1</option>
    <option value="9">SV-C1-B2</option>
    <option value="10" class="ColorGreen">SV-C1-B3</option>
    <option value="11" class="ColorRed">SV-C1-B4</option>
    <option value="12">SV-C1-B5</option>
    <option value="13">SV-C1-F1</option>
</select>

当类不起作用时，我以为其他样式可能会覆盖它，因此尝试使用内联样式，但是它也没有任何作用。

<select name="Storage" id="Storage">
    <option value=""></option>
    <option value="40">SV-COUNTER</option>
    <option value="8">SV-C1-B1</option>
    <option value="9">SV-C1-B2</option>
    <option value="10" style="background:green !important;">SV-C1-B3</option>
    <option value="11" style="background:red !important;">SV-C1-B4</option>
    <option value="12">SV-C1-B5</option>
    <option value="13">SV-C1-F1</option>
</select>

截屏没有显示下拉菜单展开的画面（在截屏时会关闭），但是打开时，尽管调试器控制台显示了颜色，但其中没有颜色。

我该怎么做？

Answer 1

您的代码对我来说看起来很正常，并且可以正常工作。

已更新

在我看来，select在不同的操作系统上的行为不同。我们已经在以下位置测试了您的示例：

PC赢得10台Chrome浏览器-确定。
PC赢得10个Firefox-确定。
Mac Chrome-不好。
Mac Safari-确定。
Mac Firefox-不好。
Linux Ubuntu Opera-确定
Linux Ubuntu Firefox-不好
Linux Ubuntu Firefox-（WINE）确定
iOS Firefox-不好
iOS Opera-不好
iOS Safari-不好
iOS MS Edge-不好

这绝对是浏览器+操作系统问题。

要完全控制选择框css，您可以尝试使用某些jquery框架，例如 select2

https://select2.org/

https://select2.org/getting-started/basic-usage

为某些选择选项添加颜色

1 个答案: