User-Interface Elementstatus Pseudoklassen

Ab HTML5 und CSS3 sind viele neue Möglichkeiten im Bereich der Formulare hinzugekommen. Das betrifft auch die Gruppe der Pseudoklassen, zu denen die User-Interface Elementstatus Pseudoklassen zählen. Damit werden vor allem Zustände von Formularfeldern angesprochen. Während des Ausfüllvorgangs können die Formularfelder verschiedene Zustände haben, z.B. gesperrt/nicht gesperrt oder ausgewählt/abgewählt. Für solche Zustände kann man den Elementen CSS-Regeln zuweisen. Ist z.B. ein Feld gesperrt, könnte man es mit einer Hintergrundfarbe versehen. Folgende UI-Elementstatus können verwendet werden.

Diese Pseudoklassen funktionieren jedoch nicht durchgehend bei allen Formularfeldern und bei allen Browsern. Weitere User-Interface Pseudoklassen könnten zu den Spezifikationen hinzukommen.

Schreibweise

Wie auch die übrigen Pseudoklassen werden UI Elementstatus Pseudoklassen mit einem einfachen Doppelpunkt geschrieben. Außerdem können sie wie unter Kombinatoren beschrieben mit Einfachselektoren kombiniert werden.

Enabled Pseudoklasse

Die Formularfelder sind standardmäßig nicht gesperrt und haben den Status Enabled. Mit CSS-Regeln können für diesen Zustand Stile definiert werden, z.B. für die Hintergrund- oder Schriftfarbe.

Enabled Pseudoklasse

Der folgende Beispiel-Code würde für die Elemente gelten, die nicht gesperrt sind.

:enabled { background: yellow; color: red; }

Wenn man die Stile nur auf bestimmte Elemente anwenden möchte, kann man die Pseudoklasse mit Einfachselektoren verknüpfen. Einige Beispiele.

input:enabled { background: yellow; color: red; }
.klasse:enabled { background: yellow; color: red; }
#id-bezeichnung:enabled { background: yellow; color: red; }
[title]:enabled { background: yellow; color: red; }

Disabled Pseudoklasse

Man kann Formularfeldern das Attribut disabled zuweisen. Sie werden damit für die Bearbeitung gesperrt. Für diesen Zustand können CSS-Regeln festgelegt werden.

Disabled Pseudoklasse

Der folgende Beispiel-Code würde für die Elemente gelten, die gesperrt sind.

:disabled { background: yellow; color: red; }

Wie bei der Enabled Pseudoklasse können die Stile auf bestimmte Elemente angewendet werden, die gesperrt sind. Hierfür können sie mit Einfachselektoren verknüpft werden. Einige Beispiele.

input:disabled { background: yellow; color: red; }
.klasse:disabled { background: yellow; color: red; }
#id-bezeichnung:disabled { background: yellow; color: red; }
[title]:disabled { background: yellow; color: red; }

Checked Pseudoklasse

Den Radiobuttons und Checkboxen kann das Attribut checked zugewiesen werden, damit sie initial aktiviert werden. Außerdem können sie, sofern sie für die Bearbeitung nicht gesperrt sind, vom Benutzer aktiviert werden. Mit der Checked Pseudoklasse kann man CSS-Regeln festlegen, die für den aktivierten Zustand gelten.

Checked Pseudoklasse

Man könnte annehmen, dass mit dem folgenden Code die Hintergrundfarbe und das Aktiv-Zeichen der aktivierten Checkboxen und Radiobuttons formatiert werden könnte. Leider funktioniert das nicht in der Form.

:checked { background: yellow; color: red; }

Daher wird die Checked Pseudoklasse in der Regel nicht direkt zum Formatieren der Checkboxen oder Radiobuttons verwendet, sondern zum Formatieren der benachbarten Elemente. Beispielsweise kann man mit folgendem Code das Label formatieren, das dem Formularfeld folgt. Beim Aktivieren der Checkbox würde das Label mit einer roten Schriftfarbe auf einem gelben Hintergrund dargestellt werden.

input:checked + label { background: yellow; color: red; }

Indeterminate Pseudoklasse

Mit der Indeterminate Pseudoklasse sollen Checkboxen und Radiobuttons formatiert werden, die weder aktiviert, noch deaktiviert sind und somit einen unbestimmten Status (Intermediate) haben.

Indeterminate Pseudoklasse

Normalerweise haben Checkboxen und Radiobuttons nur die beiden Zustände Aktiviert/Deaktiviert und der Indeterminate-Zustand existiert eigentlich nicht. Es ist jedoch z.B. mit JavaScript möglich, den Zustand herbeizuführen. Hierfür könnte man folgenden JavaScript-Code verwenden.

<script type="text/javascript">
  var checkbox = document.getElementById("checkbox-id"); 
  checkbox.indeterminate = true;
</script>

Somit hätte man nicht nur zwei mögliche Zustände, sondern drei. Dem unbestimmten Zustand kann wie bei der Checked Pseudoklasse eine Formatierung zugewiesen werden.