:valid

Die :valid CSS Pseudoklasse repräsentiert jedes <input> oder anderes <form>-Element, dessen Inhalte erfolgreich validieren. Dies ermöglicht es, gültige Felder einfach so zu gestalten, dass sie dem Benutzer helfen, zu bestätigen, dass ihre Daten korrekt formatiert sind.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um korrekte Felder für den Benutzer hervorzuheben.

Syntax

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

Barrierefreiheit

Die Farbe Grün wird allgemein verwendet, um gültige Eingaben anzuzeigen. Personen, die unter bestimmten Arten von Farbblindheit leiden, werden den Zustand der Eingabe nicht erkennen können, es sei denn, es gibt einen zusätzlichen Indikator, der nicht auf Farben angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Anzeige gültiger und ungültiger Formulareingabefelder

In diesem Beispiel verwenden wir Strukturen wie diese, die zusätzliche <span>s enthalten, um darauf Inhalte zu generieren; wir werden diese verwenden, 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 das folgende 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>s auf position: relative, damit wir den generierten Inhalt relativ zu ihnen positionieren können. Wir positionieren dann absolut unterschiedliche generierte Inhalte, je nachdem, ob die Formulardaten gültig oder ungültig sind — ein grünes Häkchen oder ein rotes Kreuz. Um ungültigen Daten etwas mehr Dringlichkeit zu verleihen, haben wir den Eingaben auch einen dicken roten Rand gegeben, wenn sie ungültig sind.

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

Sie können es unten ausprobieren:

Beachten Sie, wie die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn sie etwas enthalten. Die E-Mail-Eingabe hingegen ist gültig, wenn sie leer ist, da sie nicht erforderlich ist, aber ungültig, wenn sie etwas enthält, das keine gültige E-Mail-Adresse ist.

Spezifikationen

Specification
HTML Standard
# selector-valid
Selectors Level 4
# validity-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch