:optional Pseudo-Class

CSS :optional Pseudo-Class

The CSS :optional pseudo-class selects form controls that do not require a value. It can be used to visually distinguish optional fields from fields that users must complete.

The :optional Pseudo-Class

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

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

The selector input:optional matches an <input> element when that input can be required but does not currently have a requirement to provide a value.

What is an Optional Control?

An optional form control is one that the user is not required to complete. For controls that support the required attribute, leaving that attribute off generally makes the control optional.

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">

The phone field does not have the required attribute, so it matches :optional.

Using :optional with Form Controls

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

input:optional,
select:optional,
textarea:optional {
  border-color: #cccccc;
}

<label for="phone-example">Phone:</label>
<input type="tel" id="phone-example" name="phone">

<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea>

Neither control is required, so both can match the corresponding :optional selectors.

:optional vs :required

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

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

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

These selectors allow optional and required controls to receive different styles based on whether the user must provide a value.

Optional Fields and Validation

The :optional pseudo-class describes whether a value is required; it does not by itself describe whether a value is valid. An optional field can still have validation rules that apply when the user enters a value.

<label for="website">Website (optional):</label>
<input type="url" id="website" name="website">

The URL field is optional, so it can be left empty. If the user enters a value, however, that value must meet the validation requirements for an input with type="url".

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

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

An optional control can therefore also match :valid or :invalid according to its current value and validation rules.

Styling Optional Fields

Optional fields can be styled differently from required fields when that distinction helps users understand a form.

input:optional {
  border: 1px solid #cccccc;
  background-color: #f5f5f5;
}

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

The styling provides a visual distinction, while the absence of a requirement determines that the field is optional.

Identifying Optional Fields

Do not rely only on color or CSS styling to communicate whether a field is optional. When the distinction is important, visible text can make the form easier to understand.

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

Clearly labeling optional fields is especially useful when most of the other fields in a form are required.

When to Use :optional

Use :optional when form controls should receive styles specifically because users are not required to provide a value. It can be useful for distinguishing optional fields from required fields or for combining the optional state with validation pseudo-classes.

If required and optional fields should have the same appearance, a regular selector such as input may be sufficient instead.

Summary

The CSS :optional pseudo-class selects supported form controls whose values are not required. It is the counterpart to :required and can help distinguish optional fields while still allowing other validation rules to apply to values users enter.

The next tutorial covers the :valid pseudo-class, which selects form controls whose current values satisfy their validation requirements.