CSS | :checked Selector - GeeksforGeeks

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:

<!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:

<!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.2
Google Chrome 4.0
Firefox 3.5
Opera 9.6
Internet Explorer 9.0

My Personal Notes

Recommended Posts: