<select>は、選択したスタイルを継承する<option>

Question

したがって、それぞれのオプションが異なる色のselectドロップダウンメニューが必要です。色が選択されている場合

<select> 
    <option value="blue" style="background-color:blue"></option> 
    <option value="red" style="background-color:red"></option> 
</select> 

は、私がselectボックス自体は、選択したオプションのbackground-color継承させたいです。

私はこれがかなり簡単にjavascriptでできることを知っていますが、これにCSSソリューションがあるのでしょうか？

Answer 1

このようにすることができます。 onchangeイベントをキャプチャする必要があり、色は文句を言わない `option`スタイル` SELECT`要素内で見つかった `option`要素を選択し、選択リスト

<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