CSS/Selektoren/user-invalid

Browserunterstützung
caniuse.com

Der :user-invalid-Pseudoklassen-Selektor selektiert Formularelemente, deren Wert anhand ihrer Validierungsbeschränkungen nicht validiert werden konnte.

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

Syntax

:user-invalid {}

anwendbar auf

* input

Beispiel

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

Wenn der Nutzer eine Eingabe tätigt, wird diese überprüft. Entspricht sie nicht den Vorgaben, wird das Eingabefeld rot umrandet. Ein nachfolgender span erhält ein rotes "X".

Siehe auch

• HTML/Elemente/input
• Formulare
  • Formulare/browsereigene Validierung,
    dort insbesondere Valide Eingaben mit CSS sichtbar machen
  • Formulare/Eingaben mit JavaScript validieren

Weblinks

• WHATWG: user-invalid (html.spec.whatwg.org)
• WHATWG: user-invalid Selectors Level 4
• MDN: :user-invalid
• Browser-Support: caniuse.com