: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, um Felder zu stylen, die nicht erforderlich sind, um ein Formular abzuschicken.

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 sich mit Hilfe von unterstützender Technologie wie einem Screenreader bewegen, verstehen, welche Eingaben gültige Inhalte benötigen, um eine erfolgreiche Formularübermittlung sicherzustellen.

Erforderliche Eingaben sollten auch visuell angezeigt werden, und zwar so, dass sich die Anzeige nicht allein auf Farbe stützt, um Bedeutung zu vermitteln. 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
# selector-optional
Selectors Level 4
# optional-pseudo

Browser-Kompatibilität

Siehe auch