:user-valid
Baseline
2023
Newly available
Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die :user-valid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert basierend auf seinen Validierungseinschränkungen korrekt validiert wird. Im Gegensatz zu :valid wird sie jedoch erst aktiviert, nachdem der Benutzer mit dem Element interagiert hat.
Diese Pseudoklasse wird angewendet, wenn das Formularelement gültig ist und eines der folgenden Ereignisse eingetreten ist:
- Der Benutzer hat eine Änderung am Formularelement vorgenommen und diese durch das Verlassen des Fokus bestätigt.
- Der Benutzer hat versucht, das Formular abzusenden, selbst wenn keine Änderung am Element vorgenommen wurde.
- Der Wert war ungültig, als er den Fokus erhielt, und der Benutzer hat eine Änderung vorgenommen, die ihn gültig macht, selbst wenn der Fokus noch auf dem Element liegt.
Sobald diese Pseudoklasse angewendet wurde, überprüft der Benutzeragent bei jedem Tastendruck, ob das Element gültig ist, wenn es den Fokus hat.
- Wenn das Element den Fokus hat und der Wert ungültig war, als es den Fokus erhielt, wird bei jedem Tastendruck erneut validiert.
Das Ergebnis ist, dass, wenn das Element gültig war, als der Benutzer damit zu interagieren begann, die Gültigkeitsformatierung nur geändert wird, wenn der Benutzer den Fokus auf ein anderes Element verschiebt. Wenn der Benutzer jedoch versucht, einen zuvor als ungültig markierten Wert zu korrigieren, zeigt das Element sofort an, wenn der Wert gültig wird. Erforderliche Elemente werden nur als ungültig markiert, wenn der Benutzer sie ändert oder versucht, einen unveränderten ungültigen Wert abzusenden.
Syntax
:user-valid {
/* ... */
}
Beispiele
Festlegen einer Farbe und eines Symbols auf :user-valid
Im folgenden Beispiel werden der grüne Rahmen und ✅ erst angezeigt, nachdem der Benutzer mit dem Feld interagiert hat. Versuchen Sie, die E-Mail-Adresse in eine andere gültige E-Mail zu ändern, um es in Aktion zu sehen.
<form>
<label for="email">Email *: </label>
<input
id="email"
name="email"
type="email"
value="test@example.com"
required />
<span></span>
</form>
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: "✓";
color: green;
}
Spezifikationen
| Specification |
|---|
| HTML # selector-user-valid |
| Selectors Level 4 # user-valid-pseudo |
Browser-Kompatibilität
Loading…