Question

我有一个HTML5 <select>，其中有几个<option>个孩子，其中每个<option>都有自己的背景和前景颜色。这是通过CSS完成的，很容易。

我想要做的是在选择<option>后保持<select>的{{1}}颜色。例如，让我说我有这个（我在下面的简单示例中没有使用CSS，但在我的真实环境中我是）：

<option>

我想以某种方式使用CSS＆＃34; transfer＆＃34;所选<select> <option style="color:red">ABC</option> <option style="color:blue" selected>DEF</option> <option style="color:green">GHI</option> </select>的背面和前景颜色为<option>，以便<select>颜色始终与所选<select>的颜色同步。如果用户在我的示例中选择了第三个选项，则在选择时它应显示为绿色。选择第一个选项，文本显示为红色。最初显示<option>时，它应该具有初始<select>的背面和前景色（蓝色前景，在上面的示例中）。

我可以通过jQuery做到这一点，但我更喜欢使用CSS，但我觉得它可能无法完成。

Answer 1

我有一个解决方案，我很高兴在jsfiddle提供。需要注意的是，每个<option>必须明确设置背景颜色（它不能从<select>继承，因为<select>的背景颜色会更改为选定的<option>变化）。

更新很遗憾，此“解决方案”仅适用于Chrome和Opera。对浏览器的兼容性非常重要。

https://jsfiddle.net/herm0xvb/1/

Answer 2

您必须从选定的选项元素

手动获取CLASS和COLOR

{{1}}

根据所选的OPTION更改SELECT颜色

2 个答案: