CSS :optional Selector

Definition and Usage

The :optional pseudo-class matches any <input>, <select>, or <textarea> that does not have the required attribute.

Use it to style non-required fields. Its opposite is :required. Fields are optional by default until you add required.

CSS Syntax

Often scoped: input:optional, select:optional, textarea:optional.

Selector Parts

How to Use :optional

Mark required fields in HTML, then style both states in CSS.

1. Add required only on fields that must be filled.
2. Leave other controls without required (they match :optional).
3. Style :optional and/or :required for a clear visual difference.
4. Also show required status in the label text for accessibility.

Live Preview

Toggle which state to highlight. Styles use real :optional / :required rules.

CSS Examples

Each snippet focuses on :optional. Use Try It Yourself for a live editor.

<style>
  input:optional {
    border: 2px dashed #64748b;
  }
</style>

<input type="text" required value="Required">
<input type="email" value="[email protected]">

<style>
  :optional {
    border: 2px solid #1d4ed8;
  }

  :required {
    border: 2px solid #b91c1c;
  }
</style>

<label>Name *<input type="text" required></label>
<label>Email <input type="email"></label>

<style>
  select:optional,
  textarea:optional {
    border: 2px dashed #64748b;
  }
</style>

<select>
  <option>Optional topic</option>
</select>
<textarea>Optional notes</textarea>

Key Takeaways