Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS | :checked Selector

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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

Syntax:

:checked {
    // CSS property
} 

Example 1: 

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>
        </center>
    </body>
</html>                   

Output:

  

Example 2: 

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 &lt;option&gt; 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

My Personal Notes arrow_drop_up
Last Updated : 23 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials