CSS-Pseudoklasse :valid
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die CSS-Pseudoklasse :valid steht für jedes <input>- oder andere <form>-Element, dessen Inhalt die Validierung erfolgreich durchläuft. So können Sie gültigen Feldern ein Erscheinungsbild geben, an dem Benutzer erkennen, dass ihre Daten korrekt formatiert sind.
Probieren Sie es aus
label {
display: block;
margin-top: 1em;
}
input:valid {
background-color: ivory;
border: none;
outline: 2px solid deepskyblue;
border-radius: 5px;
accent-color: gold;
}
<label for="email">Email Address:</label>
<input id="email" name="email" type="email" value="na@me@example.com" />
<label for="secret">Secret Code: (lower case letters)</label>
<input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />
<label for="age">Your age: (18+)</label>
<input id="age" name="age" type="number" value="5" min="18" />
<label
><input name="tos" type="checkbox" required checked /> - Do you agree to
ToS?</label
>
Syntax
:valid {
/* ... */
}
Barrierefreiheit
Die Farbe Grün wird häufig verwendet, um gültige Eingaben zu kennzeichnen. Menschen mit bestimmten Formen von Farbenblindheit können den Zustand einer Eingabe jedoch nicht erkennen, wenn kein zusätzlicher Hinweis vorhanden ist, der die Information unabhängig von der Farbe vermittelt. Üblicherweise werden dafür beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Gültige und ungültige Formularfelder kennzeichnen
In diesem Beispiel fügen wir zusätzliche <span>-Elemente ein, um Inhalte zu erzeugen, die gültige oder ungültige Daten kennzeichnen:
<fieldset>
<legend>Contact information</legend>
<p>Required fields are labeled with "required".</p>
<div>
<label for="fname">First name: </label>
<input id="fname" name="fname" type="text" required />
<span></span>
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" name="lname" type="text" required />
<span></span>
</div>
<div>
<label for="email"> Email address (include if you want a response): </label>
<input id="email" name="email" type="email" />
<span></span>
</div>
</fieldset>
Für diese Kennzeichnungen verwenden wir das folgende 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 die erzeugten Inhalte relativ zu ihnen positionieren können. Anschließend positionieren wir abhängig davon, ob die Formulardaten gültig oder ungültig sind, unterschiedliche erzeugte Inhalte absolut: ein grünes Häkchen beziehungsweise ein rotes Kreuz. Um ungültige Daten noch deutlicher hervorzuheben, geben wir den Eingabefeldern außerdem einen dicken roten Rahmen, wenn sie ungültig sind.
Hinweis:
Wir haben ::before verwendet, um diese Kennzeichnungen hinzuzufügen, da wir ::after bereits für die Kennzeichnungen der Pflichtfelder verwenden.
Sie können es unten ausprobieren:
Beachten Sie, dass die Text-Eingabefelder für Pflichtangaben ungültig sind, solange sie leer sind, aber gültig werden, sobald etwas eingegeben wurde. Das E-Mail-Eingabefeld ist dagegen leer gültig, da es keine Pflichtangabe ist. Es ist jedoch ungültig, wenn es einen Wert enthält, der keine gültige E-Mail-Adresse ist.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Browser-Kompatibilität
Siehe auch
- Weitere Pseudoklassen zur Validierung:
:required,:optional,:invalid - Validierung von Formulardaten
- Zugriff auf den Validitätsstatus mit JavaScript