Styling für gültige und ungültige Formularstatus mit CSS

Leere Pflichtfelder, die rot leuchten, bevor Benutzer auch nur ein einziges Zeichen eingegeben haben. Das ist die frustrierende Erfahrung, die viele Formulare bieten – und sie lässt sich mit modernem CSS vollständig vermeiden.

Dieser Leitfaden behandelt CSS-Formularvalidierungsstatus und die Pseudo-Klassen, die sie steuern. Sie lernen, wann Sie :valid und :invalid verwenden sollten, warum :user-valid und :user-invalid eine bessere UX bieten und wie Sie Formularfehler mit CSS stylen können, indem Sie Muster wie :has() für das Styling von Eltern-Elementen nutzen.

Wie Constraint-Validierung funktioniert

HTML5-Constraint-Validierung erfolgt automatisch. Wenn Sie Attribute wie required, type="email", min, max, minlength, maxlength oder pattern zu Formularfeldern hinzufügen, prüfen Browser die Gültigkeit kontinuierlich.

Der Browser überprüft Constraints, wann immer sich der Eingabewert ändert. CSS-Pseudo-Klassen spiegeln diesen Gültigkeitsstatus in Echtzeit wider und ermöglichen es Ihnen, Felder basierend darauf zu stylen, ob sie die Validierung bestehen oder nicht.

<input type="email" required minlength="5" />

Dieses Feld wird ungültig, wenn es leer ist, wenn der Wert nicht im E-Mail-Format vorliegt oder wenn er kürzer als fünf Zeichen ist.

Zentrale CSS-Formular-Pseudo-Klassen

:valid und :invalid

Diese Pseudo-Klassen passen auf Felder basierend auf der aktuellen Gültigkeit:

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

Das Problem: :invalid wird sofort beim Laden der Seite angewendet. Ein Pflichtfeld ohne Wert ist technisch ungültig, bevor der Benutzer es berührt hat. Dies führt zu einer schlechten Benutzererfahrung – Benutzer sehen Fehler, bevor sie überhaupt etwas falsch gemacht haben.

:required und :optional

Diese zielen auf Felder basierend auf dem required-Attribut ab:

input:required {
  border-left: 3px solid blue;
}

input:optional {
  border-left: 3px solid gray;
}

Nützlich für visuelle Indikatoren, die zeigen, welche Felder ausgefüllt werden müssen.

:in-range und :out-of-range

Für Zahlen- und Bereichs-Eingaben mit min/max-Constraints:

input:in-range {
  background: white;
}

input:out-of-range {
  background: #ffe0e0;
}

Bessere UX mit :user-valid und :user-invalid

Die Pseudo-Klassen :user-valid und :user-invalid lösen das Problem vorzeitiger Fehleranzeige. Sie passen nur, nachdem der Benutzer mit dem Feld interagiert hat – typischerweise nach dem Bearbeiten und Verlassen des Fokus.

input:user-invalid {
  border-color: red;
}

input:user-valid {
  border-color: green;
}

Jetzt zeigen Pflichtfelder beim Laden der Seite keine Fehler an. Validierungs-Styling erscheint erst, nachdem Benutzer die Möglichkeit hatten, Daten einzugeben. Dies entspricht den Benutzererwartungen und reduziert Frustration.

Diese Pseudo-Klassen haben breite Browser-Unterstützung und sollten Ihre Standardwahl für das Styling von Formularfehlern mit CSS sein.

Eltern-Styling mit :has()

Der :has()-Selektor ermöglicht das Styling von Eltern-Elementen basierend auf Validierungsstatus von Kind-Elementen – etwas, das zuvor ohne JavaScript unmöglich war.

<div class="field">
  <label for="email">E-Mail</label>
  <input type="email" id="email" required />
  <span class="error">Bitte geben Sie eine gültige E-Mail ein</span>
</div>

.error {
  display: none;
  color: red;
}

.field:has(input:user-invalid) .error {
  display: block;
}

.field:has(input:user-invalid) input {
  border-color: red;
}

Dieses Muster zeigt Fehlermeldungen nur an, wenn die enthaltene Eingabe nach Benutzerinteraktion die Validierung nicht besteht. Der Eltern-Container steuert die Sichtbarkeit von Geschwister-Fehlerelementen.

Überlegungen zur Barrierefreiheit

Visuelles Styling allein reicht nicht für barrierefreie Formulare aus. Screenreader-Benutzer benötigen programmatische Fehlerzuordnungen.

Kombinieren Sie CSS-Validierungsstatus mit geeigneten ARIA-Attributen:

<div class="field">
  <label for="email">E-Mail</label>
  <input 
    type="email" 
    id="email" 
    required
    aria-describedby="email-error"
    aria-invalid="false"
  />
  <span id="email-error" class="error" aria-live="polite">
    Bitte geben Sie eine gültige E-Mail ein
  </span>
</div>

Wichtige Anforderungen an die Barrierefreiheit:

• aria-describedby verknüpft die Eingabe mit ihrer Fehlermeldung
• aria-live="polite" kündigt Fehleränderungen für Screenreader an
• aria-invalid sollte über JavaScript aktualisiert werden, wenn die Validierung fehlschlägt
• Farbkontrast muss WCAG-Anforderungen erfüllen (4,5:1 für Text)
• Verlassen Sie sich nicht nur auf Farbe – verwenden Sie Icons oder Text zusätzlich zu Farbänderungen

Praktisches Muster: Vollständige Feldvalidierung

Hier ist ein produktionsreifes Muster, das diese Techniken kombiniert:

/* Basis-Feldstile */
.field input {
  border: 2px solid #ccc;
  transition: border-color 0.2s;
}

/* Gültiger Status nach Interaktion */
.field:has(input:user-valid) input {
  border-color: #2e7d32;
}

/* Ungültiger Status nach Interaktion */
.field:has(input:user-invalid) input {
  border-color: #c62828;
}

.field:has(input:user-invalid) .error {
  display: block;
}

/* Fehlermeldung standardmäßig ausgeblendet */
.error {
  display: none;
  color: #c62828;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

Dieser Ansatz hält Fehlermeldungen verborgen, bis Benutzer mit Feldern interagieren, und zeigt sie dann nur an, wenn die Validierung fehlschlägt.

Fazit

Moderne CSS-Formular-Pseudo-Klassen bieten leistungsstarkes Validierungs-Styling ohne JavaScript. Verwenden Sie :user-valid und :user-invalid als Ihre primären Werkzeuge – sie verhindern vorzeitige Fehleranzeige und entsprechen den Benutzererwartungen. Kombinieren Sie sie mit :has() für Styling auf Eltern-Ebene, das die Sichtbarkeit von Fehlermeldungen steuert.

Denken Sie daran, dass visuelles Styling die barrierefreie Fehlerbehandlung ergänzt, aber nicht ersetzt. Kombinieren Sie CSS-Validierungsstatus immer mit geeigneten ARIA-Attributen für Screenreader-Benutzer.

Häufig gestellte Fragen

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..