CSS :optional Selector

What You’ll Learn

The :optional pseudo-class targets form fields that are not required — those without the required attribute.

Introduction

The :optional selector in CSS is used to target form elements that are not required — meaning those that do not have the required attribute.

This pseudo-class is particularly useful for differentiating optional and mandatory fields, helping users understand which inputs they can skip.

Definition and Usage

Write :optional or scope it to a control type like input:optional to style only optional input fields.

📝 Syntax

The syntax for the :optional pseudo-class is:

:optional {
  /* CSS properties */
}

input:optional {
  /* optional inputs only */
}

:optional works with form elements that can have the required attribute:

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

When It Matches

Related Selectors

• :required — opposite; matches fields with the required attribute
• :valid / :invalid — validation state styling
• :enabled / :disabled — interactivity state
• [required] — attribute selector alternative for required fields

When to Use :optional

:optional improves form clarity and user experience:

• Required vs optional contrast — Blue borders for optional, red for required.
• Signup forms — Highlight optional fields like phone number or company name.
• Surveys — Visually soften questions users can skip.
• Scoped styling — textarea:optional for comment boxes only.
• With :required — Build a consistent two-tier form visual system.

Examples Gallery

Practice :optional with required/optional pairs, scoped inputs, textareas, and full registration forms.

:optional {
  border: 2px solid #2563eb;
  background: #eff6ff;
}

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

input:optional {
  border-color: #94a3b8;
  background: #f8fafc;
}

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

textarea:optional {
  border: 1px dashed #94a3b8;
  background: #f8fafc;
  min-height: 5rem;
}

form input:required,
form select:required {
  border-left: 4px solid #dc2626;
}

form input:optional,
form select:optional,
form textarea:optional {
  border-left: 4px solid #2563eb;
  opacity: 0.95;
}

💬 Usage Tips

• Pair with :required — Create a consistent two-tier visual system.
• Scope by type — input:optional avoids styling all form controls.
• Add label text — Do not rely on color alone; write “(optional)” in labels.
• Combine with :focus — input:optional:focus for focus ring on optional fields.
• Check contrast — Optional styling should still meet WCAG requirements.

⚠️ Common Pitfalls

• Wrong elements — :optional has no effect on <button> or <div>.
• All fields optional by default — Forgetting required makes every field match :optional.
• Color-only cues — Always supplement with label text for screen reader users.
• Overriding :invalid — Optional fields can still be invalid if format rules fail.
• Hidden required fields — display:none required fields still affect form validation.

♿ Accessibility

• Label every field — Use <label for="..."> linked to each input.
• Text indicators — Include “required” or “optional” in visible label text.
• Do not rely on color alone — Pair border colors with words or icons.
• aria-required — Use aria-required="true" on required fields for assistive tech.
• Contrast — Optional field borders and backgrounds must meet WCAG contrast ratios.

💡 Best Practices