CSS :required pseudo-class

Definition and usage

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

Form elements with the required attribute are defined as mandatory.

Tip:Use :optional Pseudo-class for selecting and setting the style of optional form elements.

Example

Choose and set the style for any <input> element with the required attribute. Also set the style for any <input> element 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 to fully support this pseudo-class.

Chrome Edge Firefox Safari Opera
10 10 4 5 10

related pages

Reference:CSS :optional pseudoklasse