Hintergrundfarbe für Option beibehalten, wenn Fokus geändert wird

Question

In diesem Beispiel: https://jsfiddle.net/pfc1qauz/10/ Wenn ich 2 auswähle und den Fokus auf C (alles auf der rechten Seite) ändere, wird die Hintergrundfarbe von 2 grau. Wie man es rot hält, wenn es nicht fokussiert ist?

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; 
} 

Danke,

Answer 1

Dies ist wahrscheinlich das Ergebnis einer Browser-spezifischen Stil. Wie Sie sehen können, wenn Sie die Entwicklertools (F12) in Google Chrome:

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

Auch wenn Sie diesen gleichen Stil mit Ihren eigenen Werte hinzuzufügen waren, es wäre es immer noch nicht außer Kraft setzen richtig:

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

Dies ist das Anwenden des Stils, den Sie sehen, auf die aktivierten Optionen in allen <select> Elementen und es kann nicht wirklich direkt überschrieben werden.

<select> Elemente sind notorisch schwer in jeder Art von Cross-Browser-Sinn zu stylen. Wenn es etwas ist, das Sie wirklich behandeln müssen, müssten Sie wahrscheinlich use a Javascript-based solution like select, die den Standard <select> als Fassade überschreiben, die <div> oder andere Elemente für Styling Zwecke verwendet.