CSS Reference Manual

CSS @rules

Comprehensive List of CSS Properties

CSS Functions (Functions)Comprehensive Manual of CSS Selectors

CSS :optional Selector

:optional CSS Pseudo-class Represents Any <input>, <select>, or <textarea> Element Without the "required" Attribute.

Complete CSS Selector Reference Manual

Online Example

If the input element does not have the "required" attribute set, set it to dark red:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)<//title>　
<style>
input:optional
{
background-color: #cc0000;
}
</style>
</head>
<body>
<h3>:optional Selector Demonstration Example.</h3>
<p>Optional input element:<br><input></p>
<p>Required input element:<br><input required></p>
<p> :optional Selector is used for elements in the form that have not set the "required" attribute. </p>
</body>
</html>

Test See If ‹/›

Definition and Usage

:optional Selector sets the specified style when the form element is optional.

If the required attribute is not specifically set for a form element, it is considered optional.

Note: 　:optional Selector is only applicable to form elements: input, select, and textarea.

Browser Compatibility

The numbers in the table indicate the first browser version number that supports the attribute.

Selector
:optional	10.0	10.0	4.0	5.0	10.0

CSS Syntax

/*Select any optional input*/
input:optional {
　　border:　1px dashed black;
}

It allows form fields to be easily displayed as optional and render their appearance. Note: Use the :required pseudo-class to set the appearance of required fields.

CSS Selector :required