CSS :optional Selector

CSS :optional selector is used to select and style optional form elements. A form element is treated as an optional element if it does not have the required attribute.

The :optional selector only applies to the <input>, <select> and the <textarea> form elements.

The :optional selector in the following example selects all <input> elements that do not have the required attribute and sets a yellow background to them:

Example:

input:optional{
    background-color: yellow;
}

Here is another example with the <textarea> form fields:

Example:

textarea:optional{
    background-color: yellow;
}

The :optional selector can also be used with other pseudo-class as well as pseudo-element selectors. It means that you can select all optional elements on a page and add styles to them on hover, focus, active, valid, invalid, etc.

The :optional selector in the following example sets a yellow background to the optional input elements as soon as you hover over them:

Example:

input:optional:hover{
    background-color: yellow;
}

CSS Syntax

The syntax of the :optional selector is as follows:

:optional{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :optional selector.

Selector
:optional10.010.04.05.010.0