:optional CSS Pseudo Class
Description
The :optional pseudo-class applies style rules to the <input> element, which does not have the required attribute set; it allows you to select required fields before submitting the form. Thus :optional applies to optional form fields.
Syntax
input:optional { ... }
Example
<p>Please enter your name and age.</p>
<p>Name: <input name="name" required ></p>
<p>Age: <input type="number" name="old"> (Optional)</p>
<p><button>Submit</button></p>input:optional {
border:1px dashed green;
} Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 10 | 12 | 10 | 4 | 10 | 5 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 37 | 18 | 4 | 10.1 | 5 | Yes |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited