:user-valid CSS-Pseudoklasse
Baseline
2023
Neu verfügbar
Seit November 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die :user-valid CSS Pseudoklasse repräsentiert jedes validierte Formularelement dessen Wert basierend auf seinen Validierungsbedingungen korrekt validiert. Im Gegensatz zu :valid wird sie jedoch erst dann übereinstimmend, wenn der Nutzer damit interagiert hat.
Diese Pseudoklasse wird angewendet, wenn das Formularfeld gültig ist und eines der folgenden Ereignisse eingetreten ist:
- Der Nutzer hat eine Änderung am Formularfeld vorgenommen und die Änderung durch Verschieben des Fokus an eine andere Stelle bestätigt.
- Der Nutzer hat versucht, das Formular abzusenden, auch wenn keine Änderung am Feld vorgenommen wurde.
- Der Wert war ungültig, als der Fokus erhalten wurde, und der Nutzer hat eine Änderung vorgenommen, die ihn gültig macht, selbst wenn der Fokus noch auf dem Feld liegt.
Sobald diese Pseudoklasse angewendet wurde, überprüft der User-Agent bei jedem Tastenanschlag, ob das Feld bei Fokus gültig ist.
- Wenn das Feld den Fokus hat und der Wert beim Erlangen des Fokus ungültig war, erfolgt bei jedem Tastenanschlag eine erneute Validierung.
Das Ergebnis ist, dass, wenn das Feld gültig war, als der Nutzer zu interagieren begann, die Gültigkeitsstile nur dann geändert werden, wenn der Nutzer den Fokus auf ein anderes Feld verschiebt. Wenn der Nutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Feld sofort, wenn der Wert gültig wird. Erforderliche Elemente werden nur dann als ungültig gekennzeichnet, wenn der Nutzer 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, wenn der Nutzer 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
| Spezifikation |
|---|
| HTML # selector-user-valid |
| Selectors Level 4 # user-valid-pseudo |