:valid CSS-Pseudoklasse
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 :valid CSS Pseudoklasse repräsentiert jedes <input> oder ein anderes <form>-Element, dessen Inhalt erfolgreich validiert wird. Dies ermöglicht es Ihnen, gültige Felder so zu gestalten, dass Benutzer leicht erkennen können, 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;
}
<form>
<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
>
</form>
Diese Pseudoklasse ist nützlich, um richtige Felder für den Benutzer hervorzuheben.
Syntax
:valid {
/* ... */
}
Barrierefreiheit
Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbenblindheit können den Status der Eingabe nicht erkennen, es sei denn, es gibt ein zusätzliches, nicht auf Farbe beruhendes Anzeigegerät. Normalerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Angabe von gültigen und ungültigen Formularfeldern
In diesem Beispiel fügen wir zusätzliche <span>-Elemente hinzu, um Inhalte zu generieren, die gültige oder ungültige Daten anzeigen:
<form>
<fieldset>
<legend>Feedback form</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>
<div><button>Submit</button></div>
</fieldset>
</form>
Um diese Anzeiger bereitzustellen, 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>s auf position: relative, damit wir den generierten Inhalt relativ zu ihnen positionieren können. Wir positionieren dann unterschiedlich generierten Inhalt abhängig davon, ob die Formulardaten gültig oder ungültig sind — ein grünes Häkchen bzw. ein rotes Kreuz. Um den ungültigen Daten mehr Dringlichkeit zu verleihen, haben wir den Eingaben einen dicken roten Rahmen hinzugefügt, wenn sie ungültig sind.
Hinweis:
Wir haben ::before verwendet, um diese Labels hinzuzufügen, da wir ::after bereits für die "erforderlich"-Labels verwenden.
Sie können es unten ausprobieren:
Beachten Sie, wie die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn etwas ausgefüllt ist. Das E-Mail-Eingabefeld hingegen ist gültig, wenn es leer ist, da es nicht erforderlich ist, aber ungültig, wenn es etwas enthält, das keine gültige E-Mail-Adresse ist.
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:required,:optional,:invalid - Formulardatenvalidierung
- Zugriff auf den validity state aus JavaScript