: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 Validierungsbeschränkungen korrekt validiert wird. Im Gegensatz zu :valid wird es jedoch nur angewendet, nachdem der Benutzer damit interagiert hat.
Diese Pseudoklasse wird angewendet, wenn das Formularsteuerungselement gültig ist und eines der folgenden Ereignisse eingetreten ist:
- Der Benutzer hat eine Änderung am Formularsteuerungselement vorgenommen und die Änderung übernommen, indem er beispielsweise den Fokus woanders hin verlagert hat.
- Der Benutzer hat versucht, das Formular abzusenden, selbst wenn keine Änderung am Steuerungselement vorgenommen wurde.
- Der Wert war ungültig, als es den Fokus erhielt, und der Benutzer hat eine Änderung vorgenommen, die ihn gültig gemacht hat, selbst wenn der Fokus weiterhin auf dem Steuerungselement liegt.
Sobald diese Pseudoklasse angewendet wurde, überprüft der Benutzeragent bei jedem Tastendruck, ob das Steuerungselement gültig ist, wenn es den Fokus hat.
- Wenn das Steuerungselement den Fokus hat und der Wert ungültig war, als es den Fokus erhielt, wird bei jedem Tastendruck neu validiert.
Das Ergebnis ist, dass, wenn das Steuerungselement gültig war, als der Benutzer begann, damit zu interagieren, das Gültigkeits-Styling nur geändert wird, wenn der Benutzer den Fokus auf ein anderes Steuerungselement verschiebt. Wenn der Benutzer jedoch versucht, einen zuvor als ungültig markierten Wert zu korrigieren, zeigt das Steuerungselement 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
Farbe und Symbol auf :user-valid setzen
Im folgenden Beispiel werden der grüne Rand und ✅ erst angezeigt, wenn der Benutzer mit dem Feld interagiert hat. Versuchen Sie, die E-Mail-Adresse in eine andere gültige E-Mail zu ändern, um dies 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…