:required Pseudo-Class

CSS :required Pseudo-Class

The CSS :required pseudo-class selects form controls that are required before a form can be successfully submitted. It can be used to visually distinguish required fields from optional fields.

The :required Pseudo-Class

The :required pseudo-class is added directly to a selector with no space between the selector and the colon.

input:required {
  border-color: #0088cc;
}

The selector input:required matches an <input> element when that input is required.

The required Attribute

The HTML required Boolean attribute indicates that a supported form control must have an acceptable value before the form can be successfully submitted. A control with this requirement can match the CSS :required pseudo-class.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

input:required {
  border: 2px solid #0088cc;
}

The HTML attribute creates the requirement, while the CSS pseudo-class allows the control to be selected according to that state.

Using :required with Form Controls

The :required pseudo-class can match form controls that support the HTML required attribute, including many types of <input> elements as well as <select> and <textarea> elements.

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

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>

Both controls are required and therefore match the corresponding :required selectors.

:required vs :optional

The :required and :optional pseudo-classes describe opposite requirement states for form controls that can be required.

input:required {
  border-color: #0088cc;
}

input:optional {
  border-color: #cccccc;
}

These selectors make it possible to visually distinguish fields users must complete from fields they may leave empty. The next tutorial covers :optional in more detail.

Required Fields and Validation

The :required pseudo-class identifies whether a control is required; it does not indicate whether the current value is valid. Validity is handled separately by pseudo-classes such as :valid and :invalid.

input:required {
  border-left: 3px solid #0088cc;
}

input:required:valid {
  border-color: green;
}

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

A required field can therefore match :required and also match either :valid or :invalid, depending on its current value and validation requirements.

Styling Required Fields

Required fields are often given a visual treatment that distinguishes them from optional fields. For example, a border can be used to make required controls easier to identify.

input:required {
  border: 2px solid #0088cc;
}

<label for="email-example">Email:</label>
<input type="email" id="email-example" name="email" required>

The border provides a visual distinction, while the HTML required attribute provides the actual form requirement.

Identifying Required Fields

Do not rely only on color or CSS styling to tell users that a field is required. The form should clearly communicate which fields must be completed, such as by including the word "required" in the visible label or instructions.

<label for="email-required">Email (required):</label>
<input type="email" id="email-required" name="email" required>

The visible text helps users recognize the requirement, while the required attribute gives the browser the information it needs for form validation.

When to Use :required

Use :required when form controls should receive styles specifically because they must be completed. It is useful for distinguishing required fields from optional fields and can also be combined with validation pseudo-classes when different states need different styles.

CSS should supplement the HTML requirement rather than replace it. Use the required attribute to define the requirement and :required to control its presentation.

Summary

The CSS :required pseudo-class selects supported form controls whose values are required. It works with the HTML required state and can be used to visually distinguish required fields from optional fields.

The next tutorial covers the :optional pseudo-class, which selects supported form controls whose values are not required.