CSS :required pseudo-class

Definition and usage

CSS :required Pseudo-classes are used to select and set the styles of required form elements (only applicable to <input>,<select> and <textarea>)

Form elements with the required attribute are defined as required.

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

Example

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

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

Try it yourself

CSS syntax

:required {
  css declarations;
}

Technical details

Version: CSS3

Browser support

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

Chrome Edge Firefox Safari Opera
10 10 4 5 10

Related pages

Reference:CSS :optional Pseudo-class