:user-invalid CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2023 browserübergreifend verfügbar.
Die :user-invalid-CSS-Pseudoklasse bezeichnet jedes Formularelement mit Validierung, dessen Wert gemäß den Validierungsbedingungen ungültig ist, nachdem der Benutzer damit interagiert hat.
Die Pseudoklasse :user-invalid muss auf ein Element zutreffen, das :invalid oder :out-of-range ist oder leer ist, obwohl es :required ist. Dies gilt vom Versuch des Benutzers, das Formular abzusenden, bis zur nächsten Interaktion mit dem Formularelement.
Syntax
:user-invalid {
/* ... */
}
Beispiele
Farbe und Symbol für :user-invalid festlegen
Im folgenden Beispiel werden der rote Rahmen und das ❌ erst angezeigt, nachdem der Benutzer mit dem Feld interagiert hat. Geben Sie etwas anderes als eine E-Mail-Adresse ein, um dies auszuprobieren.
<label for="email">Email *: </label>
<input id="email" name="email" type="email" required />
<span></span>
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: "✖";
color: red;
}
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |