Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:valid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die:validCSSPseudoklasse repräsentiert jedes<input> oder andere<form>-Element, dessen Inhalt erfolgreichvalidiert wird. Dies ermöglicht es, dass gültige Felder leicht ein Erscheinungsbild annehmen können, das dem Nutzer bestätigt, dass seine 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 name="email" type="email" value="na@me@example.com" /> <label for="secret">Secret Code: (lower case letters)</label> <input name="secret" type="text" value="test" pattern="[a-z]+" /> <label for="age">Your age: (18+)</label> <input 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 dem Benutzer korrekte Felder hervorzuheben.
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, es sei denn, es wird zusätzlich ein Indikator verwendet, der nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Gültige und ungültige Formularfelder anzeigen
In diesem Beispiel fügen wir zusätzliche<span>-Elemente hinzu, um Inhalte zu erzeugen, die gültige oder ungültige Daten anzeigen:
<form> <fieldset> <legend>Feedback form</legend> <p>Required fields are labelled with "required".</p> <div> <label for="fname">First name: </label> <input name="fname" type="text" required /> <span></span> </div> <div> <label for="lname">Last name: </label> <input name="lname" type="text" required /> <span></span> </div> <div> <label for="email"> Email address (include if you want a response): </label> <input name="email" type="email" /> <span></span> </div> <div><button>Submit</button></div> </fieldset></form>Um diese Indikatoren bereitzustellen, verwenden wir folgendes CSS:
body { font-family: sans-serif; margin: 20px auto; max-width: 460px;}fieldset { padding: 10px 30px 0;}legend { color: white; background: black; padding: 5px 10px;}fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap;}button,label,input { display: block; font-family: inherit; margin: 0; box-sizing: border-box; width: 100%; padding: 5px; height: 30px;}input { box-shadow: inset 1px 1px 3px #cccccc; border-radius: 5px;}input:hover,input:focus { background-color: #eeeeee;}input:required + span::after { font-size: 0.7rem; position: absolute; content: "required"; color: white; background-color: black; padding: 5px 10px; top: -26px; left: -70px;}button { width: 60%; margin: 0 auto;}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 aufposition: relative, damit wir den erzeugten Inhalt relativ zu diesen positionieren können. Anschließend positionieren wir verschiedene generierte Inhalte absolut, je nachdem, ob die Formulardaten gültig oder ungültig sind — ein grüner Haken oder ein rotes Kreuz. Um die Dringlichkeit ungültiger Daten etwas zu erhöhen, haben wir den Eingaben bei Ungültigkeit auch einen dicken roten Rand gegeben.
Hinweis:Wir haben::before verwendet, um diese Labels hinzuzufügen, da wir bereits::after für die "required"-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 sie ausgefüllt sind. 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
| Specification |
|---|
| HTML # selector-valid |
| Selectors Level 4 # valid-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:required,:optional,:invalid - Formulardatenvalidierung
- Zugriff auf denvalidity state aus JavaScript