CSS :optional pseudo-class

Definition and usage

CSS :optional Pseudo-class is used to select and set the styles of optional form elements (only for <input>,<select> and <textarea>)

Form elements without the required attribute are defined as optional.

Tip:Usage :required Pseudo-class for selecting and setting the styles of required form elements.

Example

Select and set the styles for any <input> elements without the required attribute. Also set the styles for any <input> elements with the required attribute:

input:optional {
  background-color: lightgreen;
}
input:required {
  background-color: pink;
  border-color: red;
}

Try it yourself

CSS syntax

:optional {
  css declarations;
}

Technical details

Browser support

The numbers in the table indicate the first browser version that fully supports this pseudo-class.

Related pages

Reference:CSS :required pseudo-class