: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
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
: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
<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
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
- Andere validierungsbezogene Pseudoklassen:
:required
,:invalid
,:valid
- Formulardatenauswertung