CSS :required Selector

CSS :required selector is used to select and style the form elements that have a required attribute. In case you don’t know, the required attribute indicates to the user which fields are necessary to fill out before submission.

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

The :required selector in the following example sets a red color border to those <input> elements that have a required attribute:

Example:

input:required{
    border-color: red;
}

The :required selector in the following example selects all <textarea> elements with a required attribute and sets a red color border around them:

Example:

textarea:required{
    border-color: red;
}

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

In the following example, we are applying a red color border to the <input> elements that have a required attribute only when we are hovering over them:

Example:

input:required:hover{
    border-color: red;
}

CSS Syntax

The syntax of the :required selector is as follows:

:required{
   CSS Styles;
}

Browser Support

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