Marusya's School Notes

The :Optional Pseudo-Class

The :optional selector selects form elements which are optional. Form elements with no required attribute are defined as optional. Note: This selector only applies to the form elements: input, select and textarea. In this demonstration, the selector selects and styles only if the <input> element does not have a "required" attribute:

HTML file:	Displayed by browser:
<style> input:optional { background-color: yellow; } </style> <body> <h3>A demonstration of the :optional selector.</h3> <p>An optional input element:<br /><input>.</p> <p>An required input element:<br /><input required>.</p> <p>The :optional selector selects form elements with no "required" attribute.</p> </body>	A demonstration of the :optional selector. An optional input element: A required input element: The :optional selector selects form elements with no "required" attribute.

HTML file:

Displayed by browser:

<body>
<h3>A demonstration of the :optional selector.</h3>
<p>An optional input element:<br /><input>.</p>
<p>An required input element:<br /><input required>.</p>
<p>The :optional selector selects form elements with no "required" attribute.</p>
</body>

A demonstration of the :optional selector.

An optional input element:

A required input element:

The :optional selector selects form elements with no "required" attribute.

Use the :required selector to select form elements which are required. Note: The :optional selector is not supported in Internet Explorer 9 or earlier versions.