CSS :required Pseudo-Klasse - Learn CSS

Die CSS-Pseudo-Klasse :required trifft jedes Formularsteuerelement, dessen required-Attribut gesetzt ist. Damit kannst du Felder, die ein Benutzer ausfüllen muss, bevor das Formular abgesendet werden kann, visuell kennzeichnen — mit einem Sternchen, einem farbigen Rand oder einem Hinweistext — damit Nutzer nicht erst auf den Senden-Button klicken, um dann durch einen Validierungsfehler zurückgeworfen zu werden.

Diese Seite erklärt, welche Elemente :required trifft, wie es sich von :optional und den Gültigkeits-Pseudo-Klassen unterscheidet, welchen Zugänglichkeits-Hinweis du kennen solltest, und zeigt ein lauffähiges Beispiel.

Welche Elemente trifft `:required`?

:required trifft nur Elemente, die das required-Attribut tatsächlich unterstützen und bei denen es gesetzt ist:

<input> (von einem Typ, der required unterstützt — text, email, password, tel, url, number, date, checkbox, radio, file usw.)
<select>
<textarea>

Es trifft nicht <button>, <input type="submit">, <input type="hidden"> oder Elemente, bei denen required keine Bedeutung hat. Das Matching ist dynamisch: Wenn du das required-Attribut per JavaScript hinzufügst oder entfernst, wird das Styling sofort aktualisiert.

`:required` vs. verwandte Pseudo-Klassen

:required beschreibt den Zustand der Einschränkung, nicht ob der Benutzer sie erfüllt hat. Kombiniere es mit den passenden Nachbarn:

Pseudo-Klasse	Trifft zu, wenn…
`:required`	das Feld das `required`-Attribut hat
`:optional`	das Feld `required` nicht hat
`:valid`	der aktuelle Wert des Feldes seine Einschränkungen erfüllt
`:invalid`	der aktuelle Wert des Feldes seine Einschränkungen nicht erfüllt

Jedes Formularsteuerelement ist entweder :required oder :optional, sodass du das Styling sauber aufteilen kannst. Die Gültigkeitszustände (:valid / :invalid) reagieren dann, während der Benutzer tippt.

Syntax

:required {
  /* CSS declarations */
}

Normalerweise schränkst du es auf einen bestimmten Steuerelementtyp ein, damit die Regel nicht auf unverwandte Elemente übergreift:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Hinweis zur Barrierefreiheit

Styling allein (Farbe, ein dickerer Rand) reicht nicht aus — farbenblinde Nutzer und Screenreader-Nutzer könnten es übersehen. Behalte das native required-Attribut am Steuerelement (es macht die Anforderung für Hilfstechnologien sichtbar und löst die Browser-Validierung aus) und ergänze es durch einen sichtbaren Texthinweis wie ein Sternchen. :required dient der visuellen Verbesserung, nicht der Informationsvermittlung.

Beispiel

Das folgende Beispiel markiert Pflichtfelder mit einem blauen unteren Rand und graut optionale Felder mit :optional aus:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Probier es selbst »

Die Pflichtfelder Name und Email erhalten den blauen Unterstrich; die optionalen Felder Phone und Address erhalten den grauen Hintergrund — gesteuert ausschließlich durch die :required- und :optional-Regeln.

Browserunterstützung und Spezifikation

:required wird von jedem modernen Browser unterstützt und das schon seit Jahren, sodass du es ohne Fallback verwenden kannst. Es ist in zwei Spezifikationen definiert:

Übung

Was ist die Funktion der ':required'-Pseudo-Klasse in CSS?

Sie wählt jedes `<input>`-Element mit einem 'required'-Attribut ausSie wählt jedes `<input>`-Element ohne ein 'required'-Attribut ausSie bettet Bilder in die CSS-Datei einSie wird verwendet, um Elemente mit dem required-Attribut im Formular auszuwählenSie passt die Größe von Bildern in CSS an

Welche Elemente trifft :required?

:required vs. verwandte Pseudo-Klassen