:optional pseudo-class

Applies one or more styles to specified input fields when the fields are optional.

Internet Explorer 10



selector:optional {...}



A CSS simple selector.


An optional field is defined as any input field that can accept the required attribute but does not have it set, plus any select and textarea elements that don't have the required attribute set.


The following example puts a green border on a field when it is valid and a red border with bold text when it isn't. The email field is required, but the others aren't. The URL field is pre-filled with a bad URL, so it isn't valid when the page opens. In addition, the two optional fields are styled with light gray backgrounds, and the required field with an eye-catching yellow background.

<!DOCTYPE html >
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border:solid lime;
  #PC1 input:invalid { 
    border:solid red;
  #PC1 input:required {
  #PC1 input:optional {
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>

You can view this page. (Internet Explorer 10 or a browser that supports the form validation pseudo-classes is required for this page to render correctly.)

See also

HTML5 Forms (Internet Explorer 10 Guide for Developers)
required attribute
Related pseudo-classes