:optional

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

Probieren Sie es aus

Diese Pseudoklasse ist nützlich, um Felder zu stylen, die nicht erforderlich sind, um ein Formular einzureichen.

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

Syntax

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

Barrierefreiheit

Wenn ein Formular optionale <input>s enthält, sollten erforderliche Eingaben mit dem required-Attribut gekennzeichnet werden. Dies stellt sicher, dass Personen, die mit Hilfstechnologien wie einem Bildschirmleser navigieren, verstehen können, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Formularübermittlung sicherzustellen.

Erforderliche Eingaben sollten auch visuell gekennzeichnet werden, wobei eine Darstellungsweise verwendet werden sollte, die sich nicht nur auf Farbe zur Bedeutungsvermittlung verlässt. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.

Beispiele

Das optionale Feld hat einen violetten 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 Standard
# selector-optional
Selectors Level 4
# opt-pseudos

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch