CSS optional Selector

Selector: optional trong CSS dùng để chọn và định kiểu cho các phần tử input tùy chọn. Nó chọn các phần tử input không được khai báo "required" trong form HTML.

Syntax:

:optional {
/* css declarations; */
}

Example: 

HTML
<!DOCTYPE html>
<html>

<head>
    <title>optional Selector</title>
    <style>
        /* Select optional fields and change 
                color to Yellow */
        input:optional {
            background-color: yellow;
        }

        h1 {
            color: green;
        }

        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksForGeeks</h1>
    <h3>A demonstration of the :optional selector.</h3>
    <!-- Create an HTML form -->
    <form>
        <!-- Optional Input -->
        <label>An optional input element:</label><br />
        <input>

        <br /><br />
        <!-- Required Input -->
        <label>A required input element:</label><br />
        <input required>
    </form>

    <p>
        The :optional selector selects form elements
        with no "required" attribute.
    </p>

</body>

</html>

Output:

 css-optional-selector 

Supported Browser: 

  • Google Chrome 10.0
  • Edge 12.0
  • Firefox 4.0
  • Safari 5.0
  • Opera 10.0

Last Updated : 21/07/2025