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
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Any | 5+ |
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.
I’m not sure where you are getting your info, but good topic. I needs to spend some time learning much more or understanding more. Thanks for magnificent info I was looking for this info for my mission.
It’s an awesome paragraph designed for all the internet users; they will take advantage from it I am sure.
Nicely explained, but i just have one comment – these optional fields styled like this look more like they are “disabled”, which was my first thought, so i wouldn’t really recommend this kind of style. :) But great posts btw!