Css 根据所选选项更改“选择颜色”

我有一个HTML5

和几个

子元素，每个

都有自己的背景色和前景色。这是通过CSS实现的，非常简单

我想做的是在选择

后，在

中保持

颜色。例如，假设我有这个（在下面的简单示例中我没有使用CSS，但在我的真实环境中我使用CSS）：

基础知识
DEF
GHI

我想使用CSS以某种方式将所选

的背景色和前景色“转移”到

，以便

颜色始终与所选

的颜色同步。如果用户在我的示例中选择了第三个选项，则选中时它应该显示为绿色。选择第一个选项，文本显示为红色。当初始显示

时，它应该具有初始

的背景色和前景色（在上面的示例中为蓝色前景）

---

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

我在提供的JSFIDLE上有一个我很满意的解决方案。需要注意的是，每个

必须明确设置背景色（它不能从

继承，因为

将随着所选

的更改而更改其背景色）

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

---

您必须手动从所选选项元素获取类别和颜色

$(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就可以做到这一点。仍在检查，但JS或PHP可能是您最好的选择。@tom baxter使用您的代码创建JSFIDLE因为您需要检测

select

元素的更改事件，我想您需要javascript/jquery。进一步的解决方案是：为什么我不能直接使用.css（）（除了它不起作用之外）？.css（）是否具有计算机风格？.css（）在我的浏览器（firefox）中不起作用：（不知道为什么…）。。。。

$(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;
  });
});