CSS :required Pseudo-Class

CSS :required Pseudo-Class

The CSS :required pseudo-class selects form controls that must have a value before a form can be submitted successfully. It is commonly used with the HTML required attribute to visually distinguish required inputs, textareas, and select elements from optional fields.

:required Syntax

selector:required {
  property: value;
}

The :required pseudo-class matches supported form controls whose values are required.

Basic Example

input:required {
  border: 2px solid #006699;
}

Adds a blue border to required input elements.

Textarea Example

textarea:required {
  background-color: #eaf6fc;
}

Applies a light blue background to required textareas.

Select Example

select:required {
  border-color: #006699;
}

Changes the border color of required select elements.

Combined Selector

input:required,
textarea:required,
select:required {
  border: 2px solid #006699;
}

Applies the same styling to supported required form controls.

No Parentheses

The :required pseudo-class does not accept arguments and is written without parentheses.

How :required Works

The browser determines whether a form control is required. The :required pseudo-class matches supported controls that have a required-value constraint.

HTML Example

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

CSS Example

input:required {
  border: 2px solid #006699;
  background-color: #eaf6fc;
}

The input receives the required-field styling because its required attribute makes a value mandatory.

Required State Does Not Change When Filled

A required input continues matching :required after the user enters a value. The selector describes whether a value is required, not whether one has been provided.

Required and Invalid

An empty required text input normally matches both :required and :invalid. Once a valid value is entered, it can match both :required and :valid.

Automatic State Updates

When the required constraint is added or removed from a supported control, the browser updates pseudo-class matching automatically.

CSS Does Not Make a Field Required

Applying :required styling does not create a validation requirement. Use the HTML required attribute to establish the constraint.

The required Attribute

The HTML required boolean attribute specifies that a supported form control must have a value or selection.

HTML Example

<input type="email" name="email" required>

The user must provide an acceptable email value before the form passes native constraint validation.

Boolean Attribute

<input type="text" required>
<input type="text" required="required">

Both examples enable the required constraint. The presence of the attribute matters, not its written value.

Incorrect False Value

<input type="text" required="false">

This input is still required because required is a boolean attribute. Remove the attribute entirely to make the field optional.

Attribute Selector

input[required] {
  border-color: #006699;
}

The attribute selector matches inputs with a required attribute, even on input types where the attribute does not establish a required-value constraint.

Pseudo-Class Selector

input:required {
  border-color: #006699;
}

The pseudo-class matches inputs that actually have a required-value constraint.

Important Difference

Use :required when styling based on the required state. Use [required] when specifically checking whether the attribute is present.

Required <input> Elements

Many input types support the required attribute, including text, search, URL, telephone, email, password, date, time, number, file, checkbox, and radio controls.

Text Input

<input type="text" name="page_title" required>

Requires the user to enter a text value.

Email Input

<input type="email" name="email" required>

Requires a nonempty value that satisfies the email input's validation rules.

Password Input

<input type="password" name="password" required>

Requires a password value.

Number Input

<input type="number" name="quantity" min="1" required>

Requires a numeric value that also satisfies any applicable constraints, such as the minimum value.

Date Input

<input type="date" name="start_date" required>

Requires the user to select or enter a valid date.

File Input

<input type="file" name="attachment" required>

Requires a file selection before native validation succeeds.

Unsupported Input Types

Some input types, including hidden, range, color, button, reset, submit, and image, do not support the required-value constraint.

CSS Example

input:required {
  border-color: #006699;
}

Styles input controls that support and have the required-value constraint.

Required <textarea> Elements

The <textarea> element supports the required attribute and matches :required when a value is mandatory.

HTML Example

<label for="description">Description:</label>
<textarea id="description" name="description" rows="4" required></textarea>

CSS Example

textarea:required {
  border: 2px solid #006699;
  background-color: #eaf6fc;
}

Applies a blue border and light background to a required textarea.

Empty Textarea

A required textarea with no value normally matches :invalid until the user enters content.

Placeholder Text

<textarea name="comments" placeholder="Enter your comments" required></textarea>

Placeholder text is only a hint and does not satisfy the required constraint.

Read-Only Textarea

The required attribute must not be specified on a read-only textarea. Read-only controls are excluded from constraint validation.

Required <select> Elements

The <select> element supports the required attribute and can require the user to select an appropriate option.

HTML Example

<label for="category">Category:</label>
<select id="category" name="category" required>
  <option value="">Choose a category</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

CSS Example

select:required {
  border: 2px solid #006699;
}

Applies a blue border to the required select element.

Placeholder Option

For a required single-selection dropdown with a display size of one, an initial empty-value option can serve as a placeholder. The user must select a valid nonempty option to satisfy the requirement.

Selected Value

Choosing a valid option can change the control from :invalid to :valid, but it continues matching :required.

Multiple Selection

A <select multiple required> control requires at least one selected option.

Radio Buttons and Checkboxes

The required attribute also works with radio buttons and checkboxes, although their validation behavior differs from text inputs.

Required Checkbox

<label>
  <input type="checkbox" name="agreement" required>
  I agree to the terms.
</label>

The checkbox must be checked to satisfy its required constraint.

Required Radio Group

<fieldset>
  <legend>Choose a format:</legend>
  <label><input type="radio" name="format" value="html" required> HTML</label>
  <label><input type="radio" name="format" value="css"> CSS</label>
</fieldset>

Radio buttons with the same name form a group. When one member of the group is required, the group must have a selected option to satisfy validation.

Radio Group Styling

input[type="radio"]:required {
  accent-color: #006699;
}

This selector styles radio inputs that individually have the required state. Other members of the same group may be subject to the group's validation requirement without individually matching :required.

Checkbox Groups

Unlike radio buttons, a required checkbox must itself be checked. Adding required to several checkboxes requires each of those checkboxes to be checked.

Group Labels

Use <fieldset> and <legend> to provide an accessible group label for related radio buttons and checkboxes.

Form Validation

The required attribute participates in HTML constraint validation. The :required pseudo-class identifies required controls regardless of whether their current values are valid.

Required and Invalid

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

Matches a required input that currently fails validation.

Required and Valid

input:required:valid {
  border-color: #2e7d32;
}

Matches a required input whose value satisfies its validation constraints.

Validation Example

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

An empty email input is invalid because it is required. A nonempty value must also satisfy the email input's format requirements.

User-Invalid State

input:required:user-invalid {
  border-color: #b3261e;
}

The :user-invalid pseudo-class can provide validation feedback after relevant user interaction instead of displaying an error immediately on page load.

Native Validation

When a form is submitted normally, the browser can prevent submission and display validation feedback if a required control does not satisfy its constraints.

Server-Side Validation

Client-side validation can be bypassed. Always validate required values on the server when processing submitted data.

Required vs. Optional

The :required and :optional pseudo-classes distinguish form controls according to whether a value is mandatory.

HTML Example

<label for="email-address">Email:</label>
<input type="email" id="email-address" required>
<label for="website">Website (optional):</label>
<input type="url" id="website">

CSS Example

input:required {
  border-color: #006699;
}
input:optional {
  border-color: #999;
}

Required inputs receive a blue border, while optional inputs receive a gray border.

Comparison

Optional Does Not Mean Valid

An optional email input can still be invalid if the user enters a value that does not satisfy the email format requirements.

Required Does Not Mean Empty

A required field remains required after a valid value is entered.

JavaScript and Required Fields

JavaScript can inspect or change the required state of supported form controls. CSS responds automatically when the state changes.

Check the Required Property

const input = document.getElementById("demo-email");
console.log(input.required);

The required property reports whether the HTML attribute is enabled.

Make a Field Required

input.required = true;

Adds the required constraint to a supported input.

Make a Field Optional

input.required = false;

Removes the required constraint.

Check the CSS State

console.log(input.matches(":required"));

The matches() method determines whether the element currently matches the pseudo-class.

Check Validity

console.log(input.checkValidity());

The checkValidity() method returns whether the input satisfies its current validation constraints.

Automatic CSS Updates

When JavaScript changes a supported field's required state, the browser updates :required and :optional matching without additional CSS classes.

Related Pseudo-Classes

The :required pseudo-class describes whether a value is mandatory. Other pseudo-classes describe validity, interaction, and editability.

Comparison

Required vs. Invalid

A required field can be valid or invalid. The :required pseudo-class continues matching in either state.

Required vs. Placeholder-Shown

Placeholder text does not satisfy a required field. The selectors describe separate conditions and can match the same element.

Required vs. Read-Only

The HTML required attribute is not permitted on supported controls that are read-only. Read-only controls are excluded from constraint validation.

:required Specificity

The :required pseudo-class contributes a specificity of 0-1-0, like other standard pseudo-classes.

Specificity Examples

Specificity Example

input {
  border: 2px solid #ccc;
}
input:required {
  border-color: #006699;
}

When both rules match and other cascade factors are equal, the :required rule takes precedence because it has greater specificity.

Combined Pseudo-Classes

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

Both pseudo-classes contribute to specificity, resulting in 0-2-1.

Practical Uses

The :required pseudo-class is useful for visually identifying mandatory form fields and combining required-state styling with validation feedback.

Required Field Border

input:required {
  border-color: #006699;
}

Highlights required input controls.

Required Field Background

textarea:required {
  background-color: #eaf6fc;
}

Applies a light background to required textareas.

Required Field Indicator

.form-field:has(input:required) label::after {
  content: " *";
  color: #b3261e;
}

Adds a visual asterisk after the label when its container includes a required input. The required status should also be communicated in accessible text or instructions.

Required Invalid Field

input:required:user-invalid {
  border-color: #b3261e;
}

Displays an error-colored border when a required field becomes user-invalid.

Required Valid Field

input:required:user-valid {
  border-color: #2e7d32;
}

Displays a green border when a required field becomes user-valid.

Limitations

The :required pseudo-class identifies required controls but does not describe whether the user has entered an acceptable value.

Not a Validation Result

A field can match :required while valid or invalid. Use validation pseudo-classes when styling the current validation result.

Does Not Make a Field Required

CSS cannot establish a required-value constraint through the :required selector.

Limited to Eligible Controls

Not every form control supports the HTML required attribute. Unsupported input types do not become required merely because the attribute is present.

Read-Only Controls

Read-only controls are excluded from constraint validation. Do not combine readonly and required on the same supported control.

Disabled Controls

Disabled controls are excluded from constraint validation and form submission. Disabling a required control prevents its required constraint from blocking submission while it remains disabled.

Radio Group Behavior

Radio buttons can share a group-level required selection constraint. Individual selector matching and group validation are not identical.

Client-Side Validation Can Be Bypassed

Native validation improves the user experience but does not replace server-side validation.

Visual Indicators Alone Are Insufficient

Do not rely only on border color or an automatically generated asterisk to communicate that a field is required.

Best Practices

• Use the HTML required attribute to establish required-value constraints.
• Use :required to style eligible controls that require a value.
• Use :optional to distinguish optional fields when appropriate.
• Provide visible labels and clearly identify required fields.
• Do not rely only on color to communicate required status or validation errors.
• Use :user-invalid when validation feedback should appear after relevant user interaction.
• Remember that a required field remains required after a valid value is entered.
• Use appropriate placeholder options for required select controls.
• Group related radio buttons and checkboxes with <fieldset> and <legend>.
• Always validate submitted values on the server.

:required Example

This example includes required and optional form fields. Required controls receive a blue border and light background, while optional controls have a gray border. Use the button to change the email field between required and optional states.

HTML

<div class="required-demo">
  <label for="demo-name">Name (required)</label>
  <input type="text" id="demo-name" required>
  <label for="demo-email">Email (required)</label>
  <input type="email" id="demo-email" required>
  <button type="button" id="toggle-required">Make Email Optional</button>
  <label for="demo-website">Website (optional)</label>
  <input type="url" id="demo-website">
  <label for="demo-message">Message (required)</label>
  <textarea id="demo-message" rows="3" required></textarea>
</div>

CSS

.required-demo label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}
.required-demo input,
.required-demo textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 2px solid #ccc;
  background-color: #fff;
}
.required-demo :required {
  border-color: #006699;
  background-color: #eaf6fc;
}
.required-demo :optional {
  border-color: #999;
}
.required-demo button {
  margin-top: 10px;
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript

const email = document.getElementById("demo-email");
const button = document.getElementById("toggle-required");
const label = document.querySelector('label[for="demo-email"]');
button.addEventListener("click", () => {
  email.required = !email.required;
  button.textContent = email.required ? "Make Email Optional" : "Make Email Required";
  label.textContent = email.required ? "Email (required)" : "Email (optional)";
});

Browser Result

Play in Editor

Note: Required fields start with a blue border and light background. Click Make Email Optional to remove the required constraint and change the email field's appearance. Click Make Email Required to restore it. Entering text does not remove the required-state styling.

Browser Support

Baseline: Widely available. The :required pseudo-class is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers. It has been widely supported for many years.

For current compatibility information, visit Can I Use? and search for :required.

Specifications

The :required pseudo-class is defined in CSS Selectors Level 4 as an optionality pseudo-class. It matches form controls whose values are required.

Selectors Level 4 - Optionality Pseudo-Classes