:optional

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 :optional CSS Pseudoklasse repräsentiert jedes <input>, <select> oder <textarea>-Element, das das Attribut required nicht gesetzt hat.

Probieren Sie es aus

Diese Pseudoklasse ist nützlich für die Gestaltung von Feldern, die nicht erforderlich sind, um ein Formular einzureichen.

Hinweis: Die :required Pseudoklasse wählt erforderliche Formularfelder aus.

Syntax

css
:optional {
  /* ... */
}

Barrierefreiheit

Falls ein Formular optionale <input>-Felder enthält, sollten erforderliche Eingaben mit dem Attribut required gekennzeichnet werden. Dies stellt sicher, dass Personen, die mit Hilfe von unterstützender Technologie wie einem Screenreader navigieren, verstehen können, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Formulareinreichung zu gewährleisten.

Erforderliche Eingaben sollten auch visuell angezeigt werden, wobei eine Darstellung verwendet wird, die nicht ausschließlich auf Farbe angewiesen ist, um Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Das optionale Feld hat einen lila Rand

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:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

Ergebnis

Spezifikationen

Specification
HTML Standard
# selector-optional
Selectors Level 4
# opt-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch