: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 ein anderes <form>
-Element, dessen Inhalt beim Validieren fehlschlägt.
Probieren Sie es aus
Diese Pseudoklasse ist nützlich, um Benutzern Fehler in Feldern hervorzuheben.
Syntax
:invalid {
/* ... */
}
Barrierefreiheit
Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Menschen mit bestimmten Arten von Farbenblindheit können den Status der Eingabe nicht erkennen, wenn er nicht von einem zusätzlichen Indikator begleitet wird, der nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Üblicherweise wird beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Elemente einfärben, um die Validierung zu zeigen
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 stufenweise anzeigen
In diesem Beispiel verwenden wir :invalid
zusammen mit ~
, dem nachfolgenden-Geschwisterkombinator, um ein Formular stufenweise erscheinen zu lassen. Das Formular zeigt zunächst das erste Element zur Eingabe an, und wenn der Benutzer dieses ausgefüllt hat, wird das nächste angezeigt. 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 Pseudoklasse :invalid
auf alle angewendet, wenn keines der Felder in der Gruppe ausgewählt wird. (Gruppierte Optionsfelder teilen sich denselben Wert für ihr name
-Attribut.)
Gecko-Standardeinstellungen
Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid
an. Es wird jedoch ein Stil (ein rotes "Leuchten" mithilfe der box-shadow
-Eigenschaft) auf die Pseudoklasse :user-invalid
angewendet, die in einer Teilmenge der Fälle für :invalid
gilt.
Spezifikationen
Specification |
---|
HTML # selector-invalid |
Selectors Level 4 # invalid-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:invalid | ||||||||||||
Applies to <form> elements |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Andere Validierungs-bezogene Pseudoklassen:
:required
,:optional
,:valid
- Verwandte Mozilla-Pseudoklassen:
:user-invalid
,:-moz-submit-invalid
- Validierung von Formulardaten
- Zugriff auf den Validierungsstatus mit JavaScript