:required

The :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it.

/* Selects any required <input> */
input:required {
  border: 1px dashed red;
}

This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

Note: The :optional pseudo-class selects optional form fields.

Syntax

:required

Examples

See :invalid for an example.

Accessibility concerns

Mandatory <input>s should have the required attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.

If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':required' in that specification.
Living Standard No change.
HTML5
The definition of ':required' in that specification.
Recommendation Defines the semantics of HTML and constraint validation.
Selectors Level 4
The definition of ':required' in that specification.
Working Draft No change.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:requiredChrome Full support 10Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 10Safari Full support 5WebView Android Full support 4.4.3Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support
Full support

See also