CSS :required Pseudo Class - Learn CSS

The :required CSS pseudo-class matches any form control whose required attribute is set. Use it to visually flag the fields a user must fill in before the form can be submitted — a small asterisk, a colored border, or a hint message — so people don't reach the submit button only to be bounced back by a validation error.

This page covers what :required matches, how it differs from :optional and the validity pseudo-classes, the accessibility caveat you should know, and a working example you can run.

Which elements does `:required` match?

:required only matches elements that actually support the required attribute and have it set:

<input> (of a type that can be required — text, email, password, tel, url, number, date, checkbox, radio, file, etc.)
<select>
<textarea>

It does not match <button>, <input type="submit">, <input type="hidden">, or any element where required has no meaning. The matching is dynamic: if you add or remove the required attribute with JavaScript, the styling updates immediately.

`:required` vs. related pseudo-classes

:required describes the state of the constraint, not whether the user has satisfied it. Pair it with the right neighbors:

Pseudo-class	Matches when…
`:required`	the field has the `required` attribute
`:optional`	the field does not have `required`
`:valid`	the field's current value passes its constraints
`:invalid`	the field's current value fails its constraints

Every form control is either :required or :optional, so you can split styling cleanly between the two. The validity states (:valid / :invalid) then react as the user types.

Syntax

:required {
  /* CSS declarations */
}

You usually scope it to a control type so the rule doesn't leak onto unrelated elements:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Accessibility note

Styling alone (color, a thicker border) is not enough — color-blind and screen-reader users may miss it. Keep the native required attribute on the control (it exposes the requirement to assistive tech and triggers browser validation) and reinforce it with a visible text cue such as an asterisk. :required is for the visual polish, not the information.

Example

The example below marks required fields with a blue bottom border and greys out optional ones using :optional:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Try it Yourself »

The required Name and Email inputs get the blue underline; the optional Phone and Address inputs get the grey background — driven entirely by the :required and :optional rules.

Browser support and specification

:required is supported in every modern browser and has been for years, so you can use it without a fallback. It is defined in two specifications:

:optional — the inverse: styles controls without required.
:valid and :invalid — react to whether the entered value passes its constraints.
:focus — combine with :required to highlight the active mandatory field.
:disabled and :checked — other form-state pseudo-classes.
HTML Forms — where the required attribute is set.

Practice

What is the function of the ':required' pseudo-class in CSS?

It selects every `<input>` element with a 'required' attributeIt selects every `<input>` element without a 'required' attributeIt embeds images in the CSS fileIt is used to select the items that have the required attribute in the formIt adjusts the size of images in CSS

Which elements does :required match?

:required vs. related pseudo-classes