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

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts