Formularelemente von :active über :valid bis :required

CSS für Interaktionen oder Zuständen von Formularfeldern

Ein gutes Dutzend CSS-Pseudoklassen gilt den Zuständen von Formularfeldern wie input, textarea oder select. Sie sollen dem Anwender eine schnelle Rückmeldung beim Ausfüllen von Formularen geben.

:hover

Wählt ein Element, während die Maus über dem Element liegt

button: hover { background: blue }

:focus

Wählt ein Element, wenn es fokussiert ist

input:focus { border: 2px solid blue }

:active

Wählt ein Element, während es geklickt wird

button:active { background: blue }

:checked

Wählt ein Element (Checkbox oder Radio-Element), wenn es aktiv ist

input:checked { background: green }

:enabled

Wählt aktivierte Formularelemente aus

input:enabled { background: white; }

:disabled

Wählt deaktivierte Formularelemente aus

input:disabled { background: gray; }

:required

Wählt Formularelement mit einem required-Attribut

input:required { border: 2px solid red; }

:optional

Wählt Formularelement ohne required-Attribut

input:optional { border: 2px solid red; }

:read-only

Wählt Formularelement, die nicht bearbeitet werden können

input:read-only { color: gray}

:placeholder-shown

Wählt Eingabefelder eines Formulars, deren Platzhalter sichtbar ist

input:placeholder-shown { color: navy }

:read-write

Wählt Eingabefelder eines Formulars, die bearbeitet werden können

input:read-write { background: white; }

:valid

Wählt Eingabefelder eines Formuars, die korrekt ausgefüllt sind

input:valid { color: black }

:invalid

Wählt Eingabefelder eines Formuars, die nicht korrekt ausgefüllt sind

input:invalid { background: red; color: white}

CSS :valid ist keine Validierung

Selbst das kleinste Formular kommt dem Benutzer besser entgegen, wenn die Eingaben schon im Browser des Benutzers geprüft werden. Das war in der Vergangenheit die Domaine von Javascript. Auf der einen Seite ist Javascript nicht Jedermanns Sache, auf der anderen Seite ist das Prüfen der Eingaben mit Javascript alles andere als intuitiv.

Die drei Pseudoklassen :valid, :invalid und :required hingegen sind kurz und machen die erste Prüfung einfach.

<input class="email" type="email" required placeholder="Email (erforderlich)">	

input.email:valid { 
	border: 2px solid green; 
	background: white !important
}
input.email:focus:invalid {
	border: 2px solid red;
}
input.email:required {
	background: seashell;
}

CSS :required reagiert auf das HTML-required-Attribut. Ob Benutzereingaben als korrekt gelten, entscheiden der Typ des Eingabefelds (z.B. type="email") und Attribute wie required, min, max und pattern (regulärer Ausdruck wie [0-9]{5} als Muster für die richtige Eingabe einer Postleitzahl).

:invalid kann durch einen zusätzlichen Pseudoselektor enger gefasst werden. Mit :focus wird das Feld nur gekennzeichnet, während es aktiv ist.

:enabled, :disabled

CSS :disabled wählt Elemente aus, die ein disabled-Attribut gesetzt haben und darum von der Bearbeitung ausgeschlossen sind. Die Browser zeigen Formularfelder mit disabled-Attribut schon von Haus aus ausgegraut oder sehr blass an. CSS :disabled kann darüber hinaus eigene Stile für deaktivierte Formularelemente einbringen.

<input type="text" disabled value="Keine weitere Eingabe">

<select disabled>
	<option>Kirschen</option>
	<option>Äpfel</option>
	<option>Erdbeeren</option>
</select>

input:disabled {
	background: #eee;
}
select:disabled {
	background: #eee
}

Element:checked

Damit der Benutzer gut erkennt, welche Checkboxen bzw. Radio-Buttons gewählt sind, tritt :checked auf den Plan.

<input id="green" type="checkbox" />
<label for="green"> Grün </label>

input[type=checkbox]:checked + label { 
	font-weight: 600;
	color: black;
}

Mehr zu CSS für Checkboxen und Radio-Buttons:checked

:active und :hover

In CSS und HTML spricht man von einem aktiven Element, wenn ein Benutzer mit einem Element interagiert, meistens durch Anklicken oder Tippen. Das kann ein input-Element sein, in das der Benutzer gerade seinen Namen tippt, ein Button, auf den geklickt wird, aber auch ein Link, der gerade gedrückt wird.

CSS :active betrifft nur Elemente während des Klickens oder Drückens. Die Browser stellen per Vorgabe aktive Elemente heraus, CSS kann eine stärkere Hervorhebung bewirken.

<button id="activebutton" class="btn">Aktivieren</button>

#activebutton:hover {
	background: linear-gradient(to top, silver 0%, silver 50%, gainsboro 51%);
	color: #666;
}
#activebutton:active {
	background: linear-gradient(to top, hsl(185,60%,50%) 0%, hsl(185,60%,50%) 50%, hsl(185,60%,70%) 51%);
	color: white;
}

:required

elem:required kennzeichnet Felder, in denen das Attribut required gesetzt ist, als erforderliche Eingabe.

<input class="plz" type="number" required placeholder="PLZ" />

label:has(input:required)::before {
	content: " (*) ";
	font-size: 0.8rem;
}

Das pattern-Attribut des input-Tags kann gleich bei der Eingabe signalisieren, ob tatsächlich eine valide Postleitzahl angegeben wird, und zwar ohne Javascript oder serverseitige Programmierung.

:optional

Die Pseudoklasse :optional ist quasi das Gegenstück zu required: Sie filtert Formularelemente, die nicht ausgefüllt werden müssen.

<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">E-Mail:</label>
<input type="email" id="email">
<label for="phone">Telefonnummer:</label>
<input type="tel" id="phone">

Das funktioniert allerdings nicht:

input:optional::after {
	content: "optional";
}

::after und ::before können nicht direkt auf <input>, <textarea> oder <select>-Elemente angewendet werden. Diese Elemente sind "leere" (self-closing) HTML-Tags und unterstützen keine Pseudo-Elemente.

Also wird das Pseudo-Element ::after auf das label-Element gesetzt:

input:optional ~ label::after {
	content: "(optional)";
	color: gray;
    font-size: 0.8em;
}