CSS/Selektoren/user-valid

Browserunterstützung
caniuse.com

Der :user-valid-Pseudoklassen-Selektor selektiert Formularelemente, deren Wert anhand ihrer Validierungsbeschränkungen korrekt validiert wurde.

Im Gegensatz zu :valid wird sie jedoch erst dann ausgelöst, wenn der Benutzer mit dem Element interagiert hat.

Beispiel

input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}

Wenn der Nutzer eine Eingabe tätigt, wird überprüft und dann das Eingabefeld grün umrandet. Ein nachfolgender span erhält einen grünen Haken.

Siehe auch

CSS-Selektoren

dynamische Pseudoklassen
- :active
- :any-link
- :autofill
- :buffering
- :checked
- :default
- :defined
- :disabled
- :enabled
- :focus
- :focus-visible
- :focus-within
- :future
- :has()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is() (war: matches())
- :lang()
- :link
- :muted
- :not()
- :open
- :optional
- :out-of-range
- :picture-in-picture
- :placeholder-shown
- :popover-open
- :target
- :target-current
- :user-invalid
- :user-valid
- :valid
- :visited
- :where()
einfache Selektoren
Kombinatoren
Pseudoelemente
strukturelle Pseudoklassen