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

Probieren Sie es aus

label {
  display: block;
  margin-top: 1em;
}

.req {
  color: red;
}

*:optional {
  background-color: palegreen;
}

<form>
  <label for="name">Name: <span class="req">*</span></label>
  <input id="name" name="name" type="text" required />

  <label for="birth">Date of Birth:</label>
  <input id="birth" name="birth" type="date" />

  <label for="origin"
    >How did you find out about us? <span class="req">*</span></label
  >
  <select id="origin" name="origin" required>
    <option>Google</option>
    <option>Facebook</option>
    <option>Advertisement</option>
  </select>
  <p><span class="req">*</span> - Required field</p>
</form>

Diese Pseudoklasse ist nützlich für das Styling von Feldern, 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>-Elemente enthält, sollten erforderliche Eingaben mit dem required Attribut gekennzeichnet werden. Dies stellt sicher, dass Personen, die mit Hilfe von unterstützender Technologie wie einem Screenreader navigieren, verstehen können, welche Eingaben gültige Inhalte benötigen, um eine erfolgreiche Formularübermittlung zu gewährleisten.

Erforderliche Eingaben sollten auch visuell hervorgehoben werden, mit einer Darstellung, die sich nicht ausschließlich auf Farbe zur Bedeutungsvermittlung verlässt. Typischerweise werden beschreibende Texte 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