W3cubDocs

/CSS

:optional

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

:optional {
  /* ... */
}

Examples

The optional field has a purple border

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

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

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

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

Result

Accessibility concerns

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.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
:optional 10 12 4 10 10 5 37 18 4 10.1 5 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:optional