: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.
The :optional
CSS pseudo-class represents any ,
, or
element that does not have the
required
attribute set on it.
Try it
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:optional {
background-color: palegreen;
}
This pseudo-class is useful for styling fields that are not required to submit a form.
Note:
The :required
pseudo-class selects required form fields.
Syntax
:optional {
/* ... */
}
Accessibility
If a form contains optional s, required inputs should be indicated using the
required
attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.
Required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.
Examples
The optional field has a purple border
HTML
CSS
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:optional {
border-color: rebeccapurple;
border-width: 3px;
}
Result
Specifications
Specification |
---|
HTML # selector-optional |
Selectors Level 4 # optional-pseudo |
Browser compatibility
See also
- Other validation-related pseudo-classes:
:required
,:invalid
,:valid
- Form data validation