CSS :checked Selector

The checked selector is used to select all checked elements in the input tag and radio buttons. This selector is used with radio buttons, checkbox and option elements.

Syntax:

:checked {
    // CSS property
}

Example 1: In this example, The CSS :checked selector targets checked input elements. It sets a height and width for checked checkboxes and applies a green color to the h1 element.

html

<!DOCTYPE html>
<html>

<head>
    <title>
          checked selector property
      </title>
    <style>
        h1 {
            color: green;
        }

        input:checked {
            height: 8px;
            width: 10px;
        }

        body {
            width: 60%;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>:checked Selector</h2>
    <form action="">
        Gender:
        <input type="radio" 
               checked="checked" 
               value="male"
               name="gender"> 
        Male
        <input type="radio" 
               value="female" 
               name="gender"> 
        Female<br><br>
        Computer Science Subjects:<br>
        <input type="checkbox" 
               checked="checked" 
               value="Bike">
        Computer Network<br>
        <input type="checkbox" 
               checked="checked" 
               value="Bike">
        Operating System<br>
        <input type="checkbox" 
               value="Bike">
        Mathematics<br>
        <input type="checkbox" 
               value="Bike">
        Physics<br>
    </form>
</body>

</html>

Output:

Example 2: In this example, The CSS option:checked selector targets the selected option within a <select> element. It sets a height of 10px and a font size of 20px for the selected option.

html

<!DOCTYPE html>
<html>

<head>
    <title>checked selector</title>
    <style>
        option:checked {
            height: 10px;
            font-size: 20px;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>:checked Selector in <option> Element</h2>
        <select>
            <option value="DataStructure">
                Data Structure
            </option>
            <option value="Computer Network">
                Computer Network
            </option>
            <option value="Operating System">
                Operating System
            </option>
            <option value="Computer Architecture">
                Computer Architecture
            </option>
        </select>
    </center>
</body>

</html>

Output: Supported Browsers: The browser supported by :checked Selector are listed below:

Apple Safari 3.1 and above
Google Chrome 1.0 and above
Edge 12.0 and above
Firefox 1.0 and above
Opera 9.0 and above

Explore