:optional

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it.

Try it

This pseudo-class is useful for styling fields that are not required to submit a form.

Note: The :required pseudo-class selects required form fields.

Syntax

css
:optional {
  /* ... */
}

Accessibility

If a form contains optional <input>s, required inputs should be indicated using the required attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.

Required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Examples

The optional field has a purple border

HTML

html
<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

Result

Specifications

Specification
HTML
# selector-optional
Selectors Level 4
# optional-pseudo

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:optional

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also