閉じたときにドロップダウンリストの色を変更する

Question

CSSでは、ドロップダウンの「選択」リストの個々のオプションのフォントと背景色を設定できます。ただし、これらの色は実際のドロップダウンにのみ表示されます。リストが開いていないときにページのボックスに表示される色は、デフォルトのままです。

現在、私はいくつかのオプションを持つ多くのドロップダウンボックスがあるリストを持っており、選択肢がすぐにわかるように各オプションに色を付けることができると便利です。ラジオボタンやその他の入力に変換することは、実際には実現可能ではありません。 （私のクライアントはかなりうるさいです:-P。）それはどんな慰めだ場合

Answer 1

IEは右のそれを取得;）

は、それが他のブラウザで動作するためにあなたは、いくつかのJavaScriptをする必要があります：

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor"> 
    <option style="background-color:yellow">Item 1</option> 
    <option style="background-color:lightyellow">Item 2</option> 
</select> 

<select 
    onchange="this.className=this.options[this.selectedIndex].className" 
    class="important"> 
    <option class="important" selected="selected">Item 1</option> 
    <option class="sorta-important">Item 2</option> 
</select> 

そして、あなたのCSS：

.important { background-color:yellow; } 
.sorta-important { background-color:lightyellow; } 

CSSクラス名でさえ、よりよいです

あなたのプレゼンテーションの詳細を別々にし、あなたのクラス名を意味のあるものにします。

Answer 2

私はjQueryの中でそれをやった：素晴らしい作品

<select id="ddlColors" style="background-color: White;"> 
    <option style="background-color: Aqua;">1</option> 
    <option style="background-color: Blue;">2</option> 
    <option style="background-color: Fuchsia;">3</option> 
    <option style="background-color: Gray;">4</option> 
</select> 
<script> 
    $("select").change(function() { 
     $("select").css("background-color", $("select option:selected").css("background-color")); 
    }) 
    .change(); 
</script>