: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 steht für jedes <input>-, <select>- oder <textarea>-Element, bei dem das Attribut required nicht gesetzt ist.
Probieren Sie es aus
label {
display: block;
margin-top: 0.5em;
}
fieldset {
margin-top: 0.5em;
}
*:optional {
background-color: palegreen;
}
<label for="name">Name (required):</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? (required)</label>
<select id="origin" name="origin" required>
<option value="">Choose an option</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="advertisement">Advertisement</option>
</select>
<fieldset>
<legend>Preferred contact method:</legend>
<label>
<input name="contact" type="radio" value="email" checked /> Email
</label>
<label><input name="contact" type="radio" value="phone" /> Phone</label>
</fieldset>
<label>
<input name="newsletter" type="checkbox" checked /> I want to subscribe to a
personalized newsletter.
</label>
<label>
<input name="privacy" type="checkbox" required /> I have read and I agree to
the Privacy Policy (required).
</label>
Diese Pseudoklasse ist nützlich, um Felder zu gestalten, die zum Absenden eines Formulars nicht ausgefüllt werden müssen.
Hinweis:
Die Pseudoklasse :required wählt erforderliche Formularfelder aus.
Syntax
:optional {
/* ... */
}
Barrierefreiheit
Wenn ein Formular optionale <input>-Elemente enthält, sollten erforderliche Eingabefelder mit dem Attribut required gekennzeichnet werden. So können Personen, die Hilfstechnologien wie einen Screenreader verwenden, erkennen, welche Eingabefelder gültige Inhalte benötigen, damit das Formular erfolgreich abgesendet werden kann.
Erforderliche Eingabefelder sollten auch visuell gekennzeichnet werden, und zwar so, dass die Bedeutung nicht allein durch Farbe vermittelt wird. Üblicherweise werden dafür ein 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
| Spezifikation |
|---|
| HTML # selector-optional |
| Selectors Level 4 # optional-pseudo |
Browser-Kompatibilität
Siehe auch
- Weitere Pseudoklassen für die Validierung:
:required,:invalid,:valid - Validierung von Formulardaten