CSS :required Selector

What You’ll Learn

The :required pseudo-class targets form fields that must be filled in — those with the HTML required attribute. It helps users spot mandatory fields at a glance.

Introduction

The CSS :required selector targets form elements marked with the required attribute. These are fields users must complete before the browser allows form submission.

It is especially useful for highlighting mandatory inputs, making forms easier to understand and reducing submission errors.

Definition and Usage

Use :required on its own or scoped to a control type: input:required, select:required, or textarea:required. Pair it with :optional to style non-mandatory fields differently.

📝 Syntax

The syntax for the :required pseudo-class is:

:required {
  /* CSS properties */
}

:required applies to form elements with the required attribute:

• <input> — text, email, number, tel, url, and other types
• <select> — dropdown menus
• <textarea> — multi-line text areas

Basic Example

:required {
  border: 2px solid #dc2626;
  background-color: #fef2f2;
}

:optional {
  border: 2px solid #cbd5e1;
  background-color: #fff;
}

:required vs :optional

Syntax Rules

• Add required in HTML for the selector to match.
• Pair with :optional for complete required/optional form styling.
• Scope with element selectors: input:required avoids affecting unrelated elements.
• Do not confuse with :invalid — required fields can be valid or invalid.
• Always include visible labels; don’t rely on color alone for mandatory cues.

Related Selectors

• :optional — matches fields without the required attribute
• :invalid — matches fields that fail validation
• :valid — matches fields that pass validation
• [required] — attribute selector alternative
• :disabled — matches inactive form controls

When to Use :required

:required is ideal for highlighting mandatory form fields:

• Signup forms — Mark email and password as required with distinct styling.
• Checkout flows — Highlight shipping address and payment fields.
• Contact forms — Show which fields must be completed before submit.
• Surveys — Distinguish mandatory questions from optional ones.
• Admin panels — Visually separate required configuration fields.

Examples Gallery

Practice :required with basic pairing, left-border accents, select dropdowns, and registration forms.

<style>
  :required {
    border: 2px solid #dc2626;
    background: #fef2f2;
  }
  :optional {
    border: 2px solid #cbd5e1;
    background: #fff;
  }
  input {
    padding: 0.5rem;
    border-radius: 0.4rem;
    width: 100%;
    margin-bottom: 0.75rem;
  }
</style>

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

  <label for="phone">Phone (optional):</label>
  <input type="tel" id="phone">
</form>

input:required,
select:required,
textarea:required {
  border-left: 4px solid #dc2626;
  padding-left: 0.65rem;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

select:required {
  border: 2px solid #dc2626;
  background: #fef2f2;
  color: #1e293b;
}

select:optional {
  border: 2px solid #cbd5e1;
  background: #fff;
}

.signup-form input:required,
.signup-form select:required,
.signup-form textarea:required {
  border-color: #dc2626;
  background: #fffafa;
}

.signup-form input:optional,
.signup-form textarea:optional {
  border-color: #e2e8f0;
  background: #fff;
}

💬 Usage Tips

• Pair with :optional — Style both states so users see required vs skippable fields.
• Use labels + asterisks — Combine CSS with “Email *” in label text for accessibility.
• Subtle accents work — Left borders or light backgrounds can be gentler than full red fields.
• Scope selectors — Use input:required within form wrappers.
• Combine with :invalid — Use :required:invalid for empty mandatory fields after submit.
• Test input types — Verify styling on email, text, select, and textarea consistently.

⚠️ Common Pitfalls

• Confusing with :invalid — Required fields are not automatically invalid; empty ones become invalid on submit.
• Missing required attribute — Without it in HTML, :required won’t match.
• Color-only cues — Don’t rely on red borders alone; use labels and asterisks too.
• Wrong elements — Buttons and divs don’t support :required meaningfully.
• Over-aggressive red — Full red backgrounds can feel alarming; consider subtler accents.
• CSS-only validation — Always validate on the server as well.

♿ Accessibility

• Visible labels required — Every field needs a <label>; CSS cannot replace that.
• Don’t use color alone — Pair red styling with “(required)” or asterisks in labels.
• aria-required — The required attribute sets this automatically on supported elements.
• Contrast — Ensure required field borders and text meet WCAG contrast ratios.
• Error messages — Provide text feedback when required fields are empty on submit.

💡 Best Practices