:optional
The :optional
CSS pseudo-class represents any <input>
, <select>
, or <textarea>
element that does not have the required
attribute set on it.
Try it
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
css
:optional {
/* ... */
}
Examples
The optional field has a purple border
HTML
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
css
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:optional {
border-color: rebeccapurple;
border-width: 3px;
}
Result
Accessibility concerns
If a form contains optional <input>
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.
Specifications
Specification |
---|
HTML Standard # selector-optional |
Selectors Level 4 # opt-pseudos |
Browser compatibility
BCD tables only load in the browser
See also
- Other validation-related pseudo-classes:
:required
,:invalid
,:valid
- Form data validation