:invalid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die :invalid
CSS Pseudoklasse repräsentiert jedes <form>
, <fieldset>
, <input>
oder anderes <form>
Element, dessen Inhalt die Validierung nicht besteht.
Probieren Sie es aus
Diese Pseudoklasse ist nützlich, um dem Benutzer Fehler in Feldern hervorzuheben.
Syntax
:invalid {
/* ... */
}
Barrierefreiheit
Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbblindheit können den Zustand der Eingabe nicht bestimmen, es sei denn, es wird ein zusätzlicher Indikator verwendet, der nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Elemente färben, um Validierung anzuzeigen
HTML
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Ergebnis
Abschnitte in Etappen anzeigen
In diesem Beispiel verwenden wir :invalid
zusammen mit ~
, dem nachfolgenden Geschwisterkombinator, um ein Formular schrittweise erscheinen zu lassen, sodass das Formular anfänglich das erste Element zur Vervollständigung anzeigt und wenn der Benutzer jedes Element vervollständigt, zeigt das Formular das nächste an. Wenn das gesamte Formular ausgefüllt ist, kann der Benutzer es absenden.
HTML
<form>
<fieldset>
<label for="form-name">Name</label><br />
<input type="text" name="name" id="form-name" required />
</fieldset>
<fieldset>
<label for="form-email">Email Address</label><br />
<input type="email" name="email" id="form-email" required />
</fieldset>
<fieldset>
<label for="form-message">Message</label><br />
<textarea name="message" id="form-message" required></textarea>
</fieldset>
<button type="submit" name="send">Submit</button>
</form>
CSS
/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
display: none;
}
/* Dim and disable the button while the form is invalid */
form:invalid button {
opacity: 0.3;
pointer-events: none;
}
input,
textarea {
box-sizing: border-box;
width: 100%;
font-family: monospace;
padding: 0.25em 0.5em;
}
button {
width: 100%;
border: thin solid darkgrey;
font-size: 1.25em;
background-color: darkgrey;
color: white;
}
Ergebnis
Hinweise
Optionsfelder (Radio Buttons)
Wenn eines der Optionsfelder in einer Gruppe required
ist, wird die :invalid
-Pseudoklasse auf alle angewendet, wenn keines der Felder in der Gruppe ausgewählt ist. (Gruppe von Optionsfeldern teilen denselben Wert für ihr name
Attribut.)
Gecko-Standards
Standardmäßig wendet Gecko keinen Stil auf die :invalid
-Pseudoklasse an. Es wird jedoch ein Stil (ein rotes "Leuchten" unter Verwendung der box-shadow
-Eigenschaft) auf die :user-invalid
-Pseudoklasse angewendet, die in einer Teilmenge der Fälle für :invalid
gilt.
Spezifikationen
Specification |
---|
HTML Standard # selector-invalid |
Selectors Level 4 # validity-pseudos |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere validierungsbezogene Pseudoklassen:
:required
,:optional
,:valid
- Verwandte Mozilla-Pseudoklassen:
:user-invalid
,:-moz-submit-invalid
- Formulardatenvalidierung
- Zugreifen auf den Gültigkeitszustand aus JavaScript