:invalid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die :invalid CSS Pseudoklasse repräsentiert jedes <form>, <fieldset>, <input> oder ein anderes <form>-Element, dessen Inhalt beim Validieren fehlschlägt.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um Benutzern Fehler in Feldern hervorzuheben.

Syntax

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

Barrierefreiheit

Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Menschen mit bestimmten Arten von Farbenblindheit können den Status der Eingabe nicht erkennen, wenn er nicht von einem zusätzlichen Indikator begleitet wird, der nicht auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Üblicherweise wird beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Elemente einfärben, um die Validierung zu zeigen

HTML

html
<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Ergebnis

Abschnitte stufenweise anzeigen

In diesem Beispiel verwenden wir :invalid zusammen mit ~, dem nachfolgenden-Geschwisterkombinator, um ein Formular stufenweise erscheinen zu lassen. Das Formular zeigt zunächst das erste Element zur Eingabe an, und wenn der Benutzer dieses ausgefüllt hat, wird das nächste angezeigt. Wenn das gesamte Formular ausgefüllt ist, kann der Benutzer es absenden.

HTML

html
<form>
  <fieldset>
    <label for="form-name">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>

CSS

css
/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
  display: none;
}

/* Dim and disable the button while the form is invalid */
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}

Ergebnis

Hinweise

Optionsfelder (Radio Buttons)

Wenn eines der Optionsfelder in einer Gruppe required ist, wird die Pseudoklasse :invalid auf alle angewendet, wenn keines der Felder in der Gruppe ausgewählt wird. (Gruppierte Optionsfelder teilen sich denselben Wert für ihr name-Attribut.)

Gecko-Standardeinstellungen

Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid an. Es wird jedoch ein Stil (ein rotes "Leuchten" mithilfe der box-shadow-Eigenschaft) auf die Pseudoklasse :user-invalid angewendet, die in einer Teilmenge der Fälle für :invalid gilt.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:invalid
Applies to <form> elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch