: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 nicht das Attribut required gesetzt hat.

Probieren Sie es aus

Diese Pseudoklasse ist hilfreich, um Felder zu gestalten, die nicht erforderlich sind, um ein Formular abzusenden.

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

Syntax

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

Barrierefreiheit

Wenn ein Formular optionale <input>s enthält, sollten erforderliche Eingabefelder mit dem Attribut required gekennzeichnet werden. Dies stellt sicher, dass Personen, die mit unterstützender Technologie wie einem Screenreader navigieren, verstehen können, welche Eingaben erforderlich sind, um eine erfolgreiche Formularübermittlung zu gewährleisten.

Erforderliche Eingaben sollten auch visuell hervorgehoben werden, dabei jedoch nicht ausschließlich auf Farbe setzen, um Bedeutung zu vermitteln. Typischerweise wird beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Das optionale Feld hat einen lila Rahmen

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
# selector-optional
Selectors Level 4
# optional-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch