:checked, :disabled und Formularzustands-Pseudoklassen
Formatieren Sie Formularelemente anhand ihrer interaktiven Zustände wie checked, disabled und required.
:checked, :disabled und Formularzustands-Pseudoklassen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Überblick über Pseudoklassen für Formularzustände
CSS stellt Pseudoklassen bereit, die den Zustand von HTML-Formularelementen widerspiegeln. Damit können Sie Formularsteuerelemente ohne JavaScript vollständig mit CSS gestalten.
:checked
:checked wird auf ausgewählte Kontrollkästchen und Optionsfelder angewendet sowie auf <option>-Elemente innerhalb von Auswahllisten, wenn diese ausgewählt sind.
<input type="checkbox" id="c1" checked /><label for="c1">Checked (bold blue)</label><br/><input type="checkbox" id="c2" /><label for="c2">Unchecked</label>
:checked für benutzerdefinierte Kontrollkästchen
Der :checked-Trick: Verbergen Sie das native Eingabefeld und gestalten Sie mithilfe des Selektors für benachbarte gleichgeordnete Elemente ein benutzerdefiniertes Kästchen, das durch :checked ausgelöst wird:
<label><input type="checkbox" checked /><span class="checkbox-box"></span> Custom checkbox (checked)</label>
:disabled und :enabled
:disabled wählt Formularelemente mit dem Attribut disabled aus. :enabled wählt Elemente aus, mit denen interagiert werden kann.
<input type="text" value="Disabled input" disabled />
<button>Enabled button</button>
:required und :optional
:required wählt Eingabefelder mit dem Attribut required aus. :optional wählt Eingabefelder ohne dieses Attribut aus.
<input type="text" placeholder="Required field" required />
<input type="text" placeholder="Optional field" />
:valid und :invalid
:valid und :invalid spiegeln den nativen Validierungszustand von Formularen im Browser wider, basierend auf Typ, Muster, min/max- und required-Einschränkungen.
<input type="email" value="not-an-email" />
<input type="email" value="valid@example.com" />
:user-valid und :user-invalid
Die Browserv alidierung wird unmittelbar beim Laden der Seite ausgeführt, noch bevor die Benutzerin oder der Benutzer interagiert hat. :user-valid und :user-invalid werden erst nach einer Interaktion der Benutzerin oder des Benutzers mit dem Feld angewendet – das sorgt für eine deutlich bessere UX.
<input type="email" value="not-an-email" required />
:placeholder-shown
:placeholder-shown wird angewendet, wenn ein Eingabefeld seinen Platzhaltertext anzeigt – das Feld also derzeit leer ist. Verwenden Sie diese Pseudoklasse, um leere Eingabefelder ohne JavaScript zu erkennen.
<input type="text" placeholder="Type your name" />
<span class="input-label">Floats when empty</span>
:read-only und :read-write
:read-only wählt Eingabefelder mit dem Attribut readonly aus. :read-write wählt bearbeitbare Eingabefelder aus.
<input type="text" value="Read-only field" readonly />
:indeterminate
:indeterminate wird auf Kontrollkästchen in einem Zwischenzustand angewendet (weder ausgewählt noch nicht ausgewählt – dieser Zustand wird über JavaScript gesetzt) sowie auf Optionsfelder, wenn in der Gruppe noch keine Auswahl getroffen wurde.
<input type="checkbox" id="ind1" />
<script>document.getElementById('ind1').indeterminate = true;</script>
:in-range und :out-of-range
Bei Eingabefeldern vom Typ type="number" oder type="range" mit min/max spiegeln :in-range und :out-of-range die Gültigkeit des aktuellen Werts im Verhältnis zu diesen Grenzen wider.
<input type="number" min="1" max="10" value="15" />
Kurzer Wissenstest
Welche Pseudoklasse wendet Formularvalidierungsstile erst an, nachdem die Benutzerin oder der Benutzer mit einem Eingabefeld interagiert hat?
Zusammenfassung
Pseudoklassen für Formularzustände in CSS spiegeln die native Formularvalidierung und den Interaktionszustand ohne JavaScript wider: :checked, :disabled, :required, :valid, :invalid und weitere. Bevorzugen Sie für eine bessere UX :user-invalid gegenüber :invalid. Verwenden Sie :placeholder-shown, um leere Felder zu erkennen.
Häufig gestellte Fragen
Ist die Lektion „:checked, :disabled und Formularzustands-Pseudoklassen“ kostenlos?
Ja — der vollständige Text von „:checked, :disabled und Formularzustands-Pseudoklassen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „:checked, :disabled und Formularzustands-Pseudoklassen“?
Formatieren Sie Formularelemente anhand ihrer interaktiven Zustände wie checked, disabled und required. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „:checked, :disabled und Formularzustands-Pseudoklassen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- :hover, :focus, :active und :visited
- :nth-child und :nth-of-type
- :not(), :is() und :where()
- :checked, :disabled und Formularzustands-Pseudoklassen