:optional
:optional is a CSS pseudo-class selector used to select form elements that are optional.
More specifically, it is used to select form elements that are not required; that is, form elements that do not have the required attribute set.
The form elements than can be selected using :optional are <input>s, <select>s, and <textarea>s without a required attribute.
For example, the following form elements can be selected using :optional:
<input type="text">
<input type="submit">
<!-- and other input types as well.. -->
<textarea name="name" id="id" cols="30" rows="10"></textarea>
<select name="nm" id="sel">
<!-- options -->
</select>
The following form elements can not be selected using :optional:
<input type="name" required>
<input type="email" required>
<!-- and other input types as well.. -->
<textarea name="name" id="message" cols="30" rows="10" required></textarea>
<select name="nm" id="sel" required>
<!-- options -->
</select>
:optional is useful for styling optional form elements in a way that would put less visual focus on them and more focus on the required fields.
Trivia & Notes
If you want to select form elements that are required, you can use the :required pseudo-class selector.
Just like other pseudo-class selectors, the :optional selector can be chained with other selectors such as :hover and with pseudo-elements such as ::after, among others. For example, the following rule will provide hover styles for an optional text area:
textarea:optional:hover {
/* content and styles here */
}
Examples
The following will give slightly faded styling to an input which asks the user for a website URL. This is usually an optional field in comment forms, for example.
input[type="url"]:optional {
background-color: #f5f5f5;
border: 1px solid #eee;
}
Live Demo
In the following demo, both the :optionaland the :required pseudo-class selectors are used to style form elements that are optional and required, respectively, to make required forms stand out visually.
Browser Support
The :optional pseudo-class selector is supported in Chrome 10+, Firefox, Safari, Opera 10+, Internet Explorer 10+, and on Android and iOS.