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 :valid-CSS-Pseudoklasse repräsentiert jedes <input>- oder andere <form>-Element, dessen Inhalte erfolgreich validiert werden. Dadurch können Sie gültigen Feldern leicht ein Erscheinungsbild geben, das Nutzenden bestätigt, 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>
Syntax
:valid {
/* ... */
}
Barrierefreiheit
Die Farbe Grün wird häufig verwendet, um gültige Eingaben anzuzeigen. Menschen mit bestimmten Arten von Farbenblindheit können den Zustand der Eingabe nicht erkennen, sofern dieser nicht von einem zusätzlichen Indikator begleitet wird, der sich nicht auf Farbe stützt, um Bedeutung zu vermitteln. Typischerweise werden 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 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 Indikatoren 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 die erzeugten Inhalte relativ zu ihnen positionieren können. Anschließend positionieren wir unterschiedliche erzeugte Inhalte absolut, je nachdem, ob die Daten des Formulars gültig oder ungültig sind – jeweils ein grünes Häkchen oder ein rotes Kreuz. Um den ungültigen Daten etwas mehr Dringlichkeit zu verleihen, haben wir den Eingaben bei Ungültigkeit außerdem einen dicken roten Rahmen gegeben.
Hinweis:
Wir haben ::before verwendet, um diese Beschriftungen hinzuzufügen, da wir ::after bereits für die Beschriftungen „required“ verwendet haben.
Sie können es unten ausprobieren:
Beachten Sie, dass die erforderlichen Texteingaben ungültig sind, wenn sie leer sind, aber gültig, wenn sie einen Wert 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 korrekte 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 - Validierung von Formulardaten
- Zugriff auf den Gültigkeitszustand aus JavaScript