:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :valid CSS Pseudoklasse repräsentiert jedes <input> oder andere <form>-Element, dessen Inhalt erfolgreich validiert wurde. Dadurch können gültige Felder leicht eine Erscheinung annehmen, die dem Benutzer hilft, zu bestätigen, dass ihre Daten korrekt formatiert sind.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um dem Benutzer korrekte Felder hervorzuheben.

Syntax

css
:valid {
  /* ... */
}

Barrierefreiheit

Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Menschen mit bestimmten Arten von Farbblindheit können den Status der Eingabe nicht erkennen, es sei denn, es gibt ein zusätzliches Indikatorzeichen, das nicht auf Farbe angewiesen ist, um die Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Gültige und ungültige Formularfelder anzeigen

In diesem Beispiel verwenden wir Strukturen wie diese, die zusätzliche <span>-Elemente enthalten, um Inhalte zu generieren; diese verwenden wir, um Indikatoren für gültige/ungültige Daten bereitzustellen:

html
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

Um diese Indikatoren bereitzustellen, verwenden wir folgendes CSS:

css
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

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

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

Wir setzen die <span>-Elemente auf position: relative, damit wir den generierten Inhalt relativ zu ihnen positionieren können. Wir positionieren dann absolut unterschiedlichen generierten Inhalt, je nachdem, ob die Formulardaten gültig oder ungültig sind — ein grüner Haken oder ein rotes Kreuz. Um den ungültigen Daten zusätzliche Dringlichkeit zu verleihen, haben wir den Eingaben bei Ungültigkeit auch eine dicke rote Umrandung hinzugefügt.

Hinweis: Wir haben ::before verwendet, um diese Labels hinzuzufügen, da wir ::after bereits für die "erforderlich"-Labels verwendet haben.

Probieren Sie es unten aus:

Beachten Sie, dass die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn etwas eingegeben ist. Das E-Mail-Eingabefeld ist hingegen gültig, wenn es leer ist, da es nicht erforderlich ist, aber ungültig, wenn es etwas enthält, das keine korrekte E-Mail-Adresse ist.

Spezifikationen

Specification
HTML
# selector-valid
Selectors Level 4
# valid-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch