CSS/Selektoren/Pseudoklasse/disabled, enabled, checked

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Pseudoklassen :enabled, :disabled und :checked selektieren Formularelemente danach, ob sie anwählbar (enabled = freigegeben), nicht anwählbar (disabled = gesperrt) oder angewählt (checked, check = Haken) sind.

  • CSS 2.1
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera

Das Aussehen der Bedienelemente von Formularen wird wesentlich durch den verwendeten Browser und das Betriebssystem bestimmt, die Formatierungsmöglichkeiten via CSS sind eher gering. So ist es zum Beispiel nicht möglich, die Schriftart oder -farbe der Haken in Checkboxen zu verändern. Es gibt jedoch auch Formularelemente, deren Darstellung sich mit CSS weitreichender beeinflussen lässt, wie zum Beispiel Texteingabefelder.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklassen :enabled, :disabled, :checked</title> <style> input:disabled + span::after {content: " nicht auswählbar"} input:enabled + span::after {content: " auswählbar"} input:checked + span::after {content: " ausgewählt"} input:disabled { outline: 2px solid red;} input:checked { outline: 2px solid green; } </style> </head> <body> <h1>Pseudoklassen für Benutzerinteraktionen</h1> <form action="CSS_grundlagen_enabled_disabled_checked.html"> <ul> <li><input type="checkbox"><span></span></li> <li><input type="checkbox" disabled><span></span></li> <li><input type="checkbox" checked><span></span></li> </ul> </form> </body> </html>
Im vorliegenden Beispiel werden die ausgewählten Checkboxen mit einer grünen Außenlinie umgeben; die gesperrten mit einer roten. Zusätzlich wird eine Erläuterung generiert. (Das Pluszeichen repräsentiert den Nachbarselektor.)
Beachten Sie: Möglicherweise wird eine zukünftige Spezifikation eine Pseudoklasse :indeterminate für Elemente, die weder enabled noch disabled sind, beinhalten.

Hinweis

Die Pseudoklasse checked ist integraler Bestandteil des Checkbox-Hack und kann damit genutzt werden, um dynamisches Verhalten rein mit CSS zu realisieren.