フォーカスを変更するときのオプションの背景色を保持

Question

この例では：https://jsfiddle.net/pfc1qauz/10/ 2を選択し、フォーカスをC（右部分のもの）に変更すると、2の背景色が灰色になります。それがフォーカスされていないときにそれを赤く保つ方法？

HTML：

<select class="multiselect-left" size=4> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
<select class="multiselect-right" size=4> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 

CSS：

option{ 
    background: #F00; 
} 

おかげで、

Answer 1

これはおそらく、ブラウザ固有のスタイルの結果です。

select:-internal-list-box option:checked { 
    background-color: -internal-inactive-list-box-selection; 
    color: -internal-inactive-list-box-selection-text; 
} 

は、あなたがあなた自身の値を使用して、この同じスタイルを追加したとしても、それはまだそれを正しくオーバーライドしません：

select:-internal-list-box option:checked { 
    background-color: red!important; 
    color: #FFF!important; 
} 

あなたが開発者ツールGoogle Chromeの内部（F12）を使用している場合あなたが見ることができるように

これは、表示されているスタイルを<select>要素内のチェックされたオプションに適用しており、実際に直接上書きすることはできません。

<select>要素は、あらゆる種類のクロスブラウザの意味でスタイルを設定することはよく知られています。実際に処理する必要がある場合は、<select>を<div>などのスタイリング目的のファサードとして上書きするuse a Javascript-based solution like selectが必要になります。