:optional CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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 zum Absenden eines Formulars erforderlich sind.
Hinweis:
Die :required Pseudoklasse wählt erforderliche Formularfelder aus.
Syntax
:optional {
/* ... */
}
Barrierefreiheit
Wenn ein Formular optionale <input>-Felder enthält, sollten erforderliche Eingaben mit dem required-Attribut angegeben werden. Dies stellt sicher, dass Personen, die mit Hilfe von unterstützenden Technologien wie einem Screenreader navigieren, verstehen, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Formularübermittlung zu gewährleisten.
Erforderliche Eingaben sollten auch visuell verdeutlicht werden, wobei eine Darstellung verwendet wird, die sich nicht ausschließlich auf Farbe zur Bedeutungsübermittlung stützt. Typischerweise werden beschreibender Text und/oder ein Symbol benutzt.
Beispiele
Das optionale Feld hat einen lilafarbenen 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
| Spezifikation |
|---|
| HTML # selector-optional |
| Selectors Level 4 # optional-pseudo |
Browser-Kompatibilität
Siehe auch
- Andere Validierungs-bezogene Pseudoklassen:
:required,:invalid,:valid - Formular-Datenvalidierung