CSS | :checked Selector
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
.png)
.png)