: Benutzer ungültig - CSS-Tricks

Dies :user-invalidist eine CSS-Pseudoklasse, die im Arbeitsentwurf der CSS-Auswahlstufe 4 vorgeschlagen wird und die ein Formularelement basierend darauf auswählt, ob der von einem Benutzer eingegebene Wert gültig ist, wenn er mit dem Wert verglichen wird, der als akzeptierter Wert in angegeben ist Das HTML-Markup, nachdem der Endbenutzer über diese Eingabe hinaus mit dem Formular interagiert hat. Tatsächlich :user-invalidwurde es als "Benutzerinteraktions-Pseudoklasse" bezeichnet, da es bei der Identifizierung einer Benutzeraktion bei der Auswahl eines Elements eindeutig ist.

Verwenden Sie das folgende HTML-Markup für ein Grundformular mit einem numerischen Feld:

Menge:

Der durch das HTML-Markup für die Eingabe festgelegte numerische Bereich liegt zwischen 1und 10der Standardwert wurde auf festgelegt 11. Das heißt, der Wert ist ungültig, sobald das Formular geladen wird.

Die :user-invalidPseudoklasse wird jedoch erst wirksam, nachdem der Benutzer tatsächlich mit dem Formular interagiert hat, ohne es in das Feld einzugeben. Diese Interaktion ist der Unterschied zwischen :user-invalidund :invalid. Das gleiche Prinzip gilt für eingegebene Formularwerte, die durch :in-range, :out-of-rangeund festgelegt werden :required.

Sobald der vom Benutzer eingegebene Wert als ungültiger Eintrag ermittelt wurde, können wir das Element auswählen:

input:user-invalid ( color: red; )

Das folgende Bild zeigt die verschiedenen Zustände zwischen :validund :user-invalidbasierend auf dem obigen HTML-Beispiel.

Die Differenz zwischen einem gültigen Wert (links) und einem ungültigen Wert, den ein Benutzer nach der Interaktion mit dem Formular eingegeben hat.

Das Verwirrende dabei ist, wie eng verwandt :invalidund :user-invalidsind. Bei gemeinsamer Verwendung kann es schwierig sein, die beiden zu unterscheiden:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Der Unterschied zwischen `:invalid`(Mitte) und einem ungültigen Wert, den ein Benutzer (rechts) eingegeben hat, kann schwer zu unterscheiden sein

Die Verwendung einer über der anderen oder ein unterschiedliches Design zwischen den beiden kann sich in einem realen Anwendungsfall als bessere Benutzererfahrung erweisen.