:user-invalid

Baseline 2023
Newly available

Since November 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die :user-invalid CSS-Pseudoklasse steht für jedes validierte Formularelement, dessen Wert basierend auf den Validierungsbeschränkungen ungültig ist, nachdem der Benutzer damit interagiert hat.

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

Syntax

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

Beispiele

Festlegen einer Farbe und eines Symbols für :user-invalid

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

html
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>
css
input:user-invalid {
  border: 2px solid red;
}

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

Spezifikationen

Specification
HTML
# selector-user-invalid
Selectors Level 4
# user-invalid-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch