W3cubDocs

/CSS

: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

The required field has a red border

HTML

<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input">
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required>
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;  
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}
 
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Result

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
:required 10 12 4 10 10 5
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:required 4.4.3 18 4 10.1 5 1.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:required