根据 OPTION Selected 更改 SELECT 颜色答案

【问题标题】：Changing a SELECT color based on the OPTION Selected根据 OPTION Selected 更改 SELECT 颜色
【发布时间】：2015-07-29 00:51:27
【问题描述】：

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

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

<select>
    <option style="color:red">ABC</option>
    <option style="color:blue" selected>DEF</option>
    <option style="color:green">GHI</option>
</select>

我想使用 CSS 以某种方式将所选<option> 的背景颜色和前景颜色“转移”到<select>，以便<select> 颜色始终与所选<option> 的颜色同步.如果用户在我的示例中选择了第三个选项，则在选择时它应该显示为绿色。选择第一个选项，文本显示为红色。当<select> 最初显示时，它应该具有初始<option> 的背景颜色和前景颜色（蓝色前景，在上面的示例中）。

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

【问题讨论】：

有趣的问题。我不相信这可以单独使用 CSS 来完成。仍在检查，但 JS 或 PHP 可能是你最好的选择。
@tom-baxter 用你的代码创建 jsFiddle
因为您需要检测select 元素的更改事件，我猜您需要javascript/jquery。以及进一步的解决方案Here
这对我有用：stackoverflow.com/questions/15755770/…

标签： css html select

【解决方案1】：

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

更新不幸的是，这个“解决方案”只适用于 Chrome 和 Opera。浏览器兼容性就这么多了。

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

【讨论】：

【解决方案2】：

您必须从选定的选项元素中手动获取 CLASS 和 COLOR

$(document).ready(function(){  
  $('select').change(function() {
      var opt =  $(this)[0].options[$(this)[0].selectedIndex];
    $(this)[0].style.backgroundColor = opt.style.backgroundColor;
    $(this)[0].className = opt.className;
  });
});

【讨论】：

为什么我不能只使用 .css() （除了它不起作用）？ .css() 不获取计算机样式吗？
.css() 在我的浏览器 (firefox) 中不起作用:( 不知道为什么.... jsfiddle.net/herm0xvb/2