为某些 Select 选项添加颜色

Question

显然这并不像我预期的那么简单，但我正在尝试为 select 框中的某些选项添加颜色。这些选项实际上是动态的，但由于这与问题无关，我将只 post 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 win 10 Firefox - ok.
Mac Chrome - 不行.
Mac Safari - 还行.
Mac Firefox - 不好.
Linux Ubuntu 歌剧 - 还行
Linux Ubuntu Firefox - 不行
Linux Ubuntu Firefox - (WINE) 好的
iOS Firefox - 不行
iOS 歌剧 - 不行
iOS Safari - 不好
iOS MS Edge - 不好

绝对是 浏览器+OS 问题。

要完全控制 select 框 css 你可以尝试使用一些 jquery 框架，例如 select2

https://select2.org/

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

为某些 Select 选项添加颜色

Adding Color to Some Select Options

css

html-select