:optional

Avatar of Sara Cope
Sara Cope on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

The :optional pseudo class targets inputs (including <select>s) that are not specifically set as required (do not have the required attribute).

This can be useful when you want to give optional fields a specific look, maybe slightly less visible than required ones.

Syntax

input[type=text]:optional {
  border: 1px solid #eee;
}

Demo

In the following demo, optional field (“Name”, “Gender” and “Continent”) have their opacity lowered to 40% so users can immediately know what are the required fields. In this case, “Email”. When hovered, an optional input will see the opacity go back to 100%.

The optional works on all type of form elements: text inputs of all types, radio buttons, checkboxes, and selects.

Note: You cannot know with CSS only that a label is associated with an optional field, unless in the label comes after the input (and you use a sibling combinator), which is rare and usually not a good idea. Perhaps in the future parent selectors can help with this. 

Browser support

ChromeSafariFirefoxOperaIEAndroidiOS
10+5+4+10+10+Any5+ 

Note that :optional isn’t the exact oposite of :not(:required) because the latter will match all types of elements while :optional is restricted to the form elements.

More information