Open In App

CSS :checked Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads