: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 ,
, oder
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;
}
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
:optional {
/* ... */
}
Barrierefreiheit
Wenn ein Formular optionale 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
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
- Andere validierungsbezogene Pseudoklassen:
:required
,:invalid
,:valid
- Datenvalidierung von Formularen