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:
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 <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
Please Login to comment...