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]

 Stylen Sie das -Element basierend auf der ausgewählten Report Quote Post by Guest » 20 Jan 2025, 16:23 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 allselect[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 allselect:has(option[selected][value="3"]) { background: orange; } Top 1737386602 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[name="qa_contact"] option[value="3"] {background: orange;}[/code]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:has(option[selected][value="3"]) {background: orange;}[/code] Post Reply Post Reply Previous topicNext topic Email topic Print view 1 post • Page 1 of 1 Quick Reply Subject:

Username:

Font colour:

Tiny Small Normal Large Huge H2 H3 H4 center hsimg s spoiler textarea

Change Text Case: 

Smilies

View more smilies