Stil <select> Element basierend auf ausgewählten <option>

Question

Ist es möglich, ein select Element basierend darauf, was option ist nur mit CSS ausgewählt? Ich kenne bestehende JavaScript solutions.

Ich habe versucht, das Optionselement selbst zu stylen, aber dies wird nur dem Optionselement in der Optionsliste den Stil geben, nicht dem ausgewählten Element.

select[name="qa_contact"] option[value="3"] { 
    background: orange; 
} 

http://jsfiddle.net/Aprillion/xSbhQ/

nicht möglich, wenn mit CSS 3 wird CSS 4 subject selector Hilfe in der Zukunft - oder wird dies eine verbotene Frucht zu CSS bleiben?

Answer 1

Leider, ja - das ist momentan mit CSS nicht möglich. Wie in den Antworten und Kommentaren zu this question erwähnt, gibt es derzeit keine Möglichkeit, das übergeordnete Element Element erhalten Styling basierend auf seiner Kinder.

Um das zu tun, was Sie wollen, würden Sie im Wesentlichen, welche der Kinder zu erkennen, haben (<option>) ausgewählt wird, und dann entsprechend den übergeordneten Stil.

Sie könnten jedoch erreichen dies mit einem sehr einfachen jQuery Aufruf wie folgt:

HTML

<select> 
    <option value="foo">Foo!</option> 
    <option value="bar">Bar!</option> 
</select> 

jQuery

var $select = $('select'); 
$select.each(function() { 
    $(this).addClass($(this).children(':selected').val()); 
}).on('change', function(ev) { 
    $(this).attr('class', '').addClass($(this).children(':selected').val()); 
}); 

CSS

select, option { background: #fff; } 
select.foo, option[value="foo"] { background: red; } 
select.bar, option[value="bar"] { background: green; } 

Hier ist ein working jsFiddle.

Zurück zur Frage nach der Zukunft der Selektoren. Ja - die "Betreff" -Selektoren sollen genau das tun, was Sie erwähnen. Wenn/wenn sie jemals tatsächlich lebt in modernen Browser gehen, können Sie den obigen Code anpassen können:

select { background: #fff; } 
!select > option[value="foo"]:checked { background: red; } 
!select > option[value="bar"]:checked { background: green; } 

Als Randnotiz wird noch darüber diskutiert, ob die ! vor oder nach dem Thema gehen sollte. Dies basiert auf dem Programmierstandard !something, der "nicht etwas" bedeutet. Als Ergebnis könnte das Subjekt-basierten CSS aufzuwickeln tatsächlich wie diese statt suchen:

select { background: #fff; } 
select! > option[value="foo"]:checked { background: red; } 
select! > option[value="bar"]:checked { background: green; } 

Answer 2

So, hier ist das, was ich darauf wobei gefunden. Das größte Problem ist, dass sich die Hintergrundfarbe nach der Auswahl eines Elements nicht ändert, da das select-Element nicht wirklich neu gezeichnet wird (scheint in IE mehr verfügbar zu sein - gehen Sie auf Abbildung). Auch wenn Sie eine andere Option auswählen, wird diese Option in der Liste nicht hervorgehoben, wenn Sie erneut auf das Auswahlelement klicken.

Um die Neuzeichnungsprobleme in IE zu beheben, musste die font-size um einen minimalen Betrag, + - 1, geändert werden.Die andere Sache, die nicht gut dokumentiert zu sein scheint, ist, dass die Pseudoklasse :checkedfunktioniert auch auf ausgewählte Steuerelemente.

Die fiddler, um das hinzugefügte css zu zeigen, das es möglich macht.

Ich habe nur kurz mit ihm auf Chrome und IE9, fyi gespielt.

BEARBEITEN: Offensichtlich müssen Sie den [Wert = "x"] auf den gewünschten Wert für die spezielle Option markieren.