複数選択ドロップダウンボックスで選択した項目の背景色を変更するにはどうすればよいですか？

Question

複数選択ドロップダウンボックスで選択した項目に黄色を表示したい。デフォルトでは、選択後に灰色の背景が表示されます。 HTML, CSSでこれを行います。

いずれにしてもこの問題を解決できますか？

Answer 1

我々はのDOMを選択するために、JSを使用することができます。

$('select').change(function() { 
    $('option').css('background', 'none'); 
    $('option:selected').css('backgroundColor', 'red'); 
}).change() 

<select> 
    <option>1111111</option> 
    <option>222222222</option> 
    <option>33333333</option> 
    <option>44444444</option> 
</select> 

デモ：http://jsfiddle.net/TxbVt/1/

Answer 2

できません。 <option>要素はCSSスタイルを受け入れません。

JavaScriptベースの方法を使用できます。多くの<select>置換スクリプトが利用可能です。

Answer 3

以下は（スタイリングオプションタグを許可するブラウザ用）を動作するはずです、しかし、デフォルトを選択したスタイリングは、ほとんどの場合に上書きされます。ただし、これを無効にする方法を見つけることができるかもしれ：

• http://jsfiddle.net/DEDX7/
• http://jsfiddle.net/DEDX7/1/

CSS

select option.selected { 
    font-weight: bold; 
    color: red; 
} 

javascriptの

function highlight_options(field){ 
    var i,c; 
    for(i in field.options){ 
    (c=field.options[i]).className=c.selected?'selected':''; 
    } 
} 

マークアップ

<select onchange="highlight_options(this)" multiple="multiple"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 

Answer 4

ピュアCSSはここに役立つだろう：

option:checked 

Answer 5

<style> 
    .select2-container--default .select2-results__option[aria-selected=true] { 
     background-color: inherit; 
     color: lightgray; 
    } 
</style> 

をブロック内で独自のスタイルを追加します。

Answer 6

私たちは以下のCSSの助けを借りて簡単に行うことができます。

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }