Stylen Sie das -Element basierend auf der ausgewählten ⇐ CSS CSS verstehen Post Reply Post Reply Previous topicNext topic Email topic Print view Search Advanced search

[Guest]

Ist es möglich, ein ausgewähltes-Element basierend auf der ausgewählten Option nur mit CSS zu formatieren? Mir sind vorhandene JavaScript-Lösungen bekannt.
Ich habe versucht, das Optionselement selbst zu formatieren, aber dadurch wird nur dem Optionselement in der Optionsliste ein Stil verliehen, nicht dem ausgewählten Element.

Code: Select all

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

http://jsfiddle.net/Aprillion/xSbhQ/
Wenn dies mit CSS 3 nicht möglich ist, wird die Betreffauswahl in CSS 4 in Zukunft helfen? – oder bleibt dies eine verbotene Frucht für CSS?
Update 2022: Die Verwendung der Pseudoklasse :has kann dabei helfen, die Auswahl selbst zu gestalten ( in Browsern, die beides unterstützen:has Pseudoklasse und Stil von ), aber es funktioniert nur für HTML-Attribute, also nur, wenn bei der Auswahl die Option anfänglich explizit ausgewählt ist. Ohne JS funktioniert es nicht dynamisch – nachdem der Benutzer die Auswahl geändert hat, werden dadurch nur die DOM-Eigenschaften geändert, nicht jedoch die HTML-Attribute, von denen CSS-Attributselektoren abhängen:

Code: Select all

select:has(option[selected][value="3"]) {
background: orange;
}