:optional
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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 gestalten, die nicht erforderlich sind, um ein Formular abzuschicken.
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 auf unterstützende Technologien wie Bildschirmlesegeräte angewiesen sind, verstehen können, welche Eingaben gültigen Inhalt benötigen, um eine erfolgreiche Formularübermittlung zu gewährleisten.
Erforderliche Eingaben sollten auch visuell gekennzeichnet werden, wobei eine Darstellung gewählt wird, die nicht ausschließlich auf Farben beruht, um die Bedeutung zu vermitteln. Typischerweise werden beschreibender Text und/oder ein Symbol verwendet.
Beispiele
Das optionale Feld hat einen lila 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 # selector-optional |
| Selectors Level 4 # optional-pseudo |
Browser-Kompatibilität
Loading…
Siehe auch
- Andere Validierungsbezogene Pseudoklassen:
:required,:invalid,:valid - Formulardatenvalidierung