<select>继承所选<option>的样式

Question

所以我想要一个选择下拉菜单，每个选项都是不同的颜色。 ＆LT;选择＆GT;     ＆lt; option value =“blue”style =“background-color：blue”＆gt;＆lt; / option＆gt;     ＆lt; option value =“red”style =“background-color：red”＆gt;＆lt; / option＆gt; ＆LT; /选择＆GT; 选择颜色后，我希望选择框本身继承所选选项的背景颜色。 我知道这可以通过javascript轻松完成，我想知道是否有CSS解决方案吗？

Answer 1

你可以这样做。需要捕获Onchange事件，并且需要更改选择列表的颜色

 <select name="select" onchange="this.className = this.options[this.selectedIndex].className">
     <option class="Red" value="1">Red</option>
     <option class="Green" value="2">Green</option>
     <option class="Blue" value="3">Blue</option>
</select>

.Red{
    background-color: #ff0000;
}
.Green{
   background-color: #00ff00;
}
.Blue{
    background-color: #0000ff;
}

JSFIDDLE