Die:user-invalidCSSPseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert basierend auf ihrenValidierungsbeschränkungen ungültig ist, nachdem der Benutzer damit interagiert hat.

Die:user-invalid Pseudoklasse muss mit einem:invalid,:out-of-range oder leeren, aber:required Element übereinstimmen, zwischen dem Zeitpunkt, an dem der Benutzer versucht hat, das Formular abzusenden, und bevor der Benutzer erneut mit dem Formularelement interagiert hat.

Syntax

:user-invalid {  /* ... */}

Beispiele

Farbe und Symbol auf :user-invalid festlegen

Im folgenden Beispiel werden der rote Rand und ❌ nur angezeigt, nachdem der Benutzer mit dem Feld interagiert hat. Versuchen Sie, etwas anderes als eine E-Mail-Adresse einzugeben, um es in Aktion zu sehen.

<form>  <label for="email">Email *: </label>  <input name="email" type="email" required />  <span></span></form>

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :valid
• :invalid
• :required
• :optional
• :user-valid