: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 anderes <form>-Element, dessen Inhalt bei der Validierung fehlschlägt.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um dem Benutzer Feldfehler hervorzuheben.

Syntax

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

Barrierefreiheit

Die Farbe Rot wird häufig verwendet, um ungültige Eingaben anzuzeigen. Personen mit bestimmten Arten von Farbblindheit werden den Zustand der Eingabe nicht erkennen können, sofern dieser nicht von einem zusätzlichen Indikator begleitet wird, der die Bedeutung nicht nur durch Farbe vermittelt. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Elemente färben, um die Validierung anzuzeigen

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 in Stufen anzeigen

In diesem Beispiel verwenden wir :invalid zusammen mit ~, dem Nachfolger-Geschwister-Selektor, um ein Formular schrittweise erscheinen zu lassen, sodass das Formular zunächst das erste auszufüllende Element anzeigt und, wenn der Benutzer jedes Element vervollständigt hat, das nächste anzeigt. 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

Anmerkungen

Radiobuttons

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

Gecko-Standardeinstellungen

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

Spezifikationen

Specification
HTML Standard
# selector-invalid
Selectors Level 4
# validity-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch