: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
Explorer Edge Chrome Firefox Opera Safari
1012104105
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3718410.15Yes