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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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
Recommended Posts:
- jQuery | :checked Selector
- AngularJS | ng-checked Directive
- How to read if a checkbox is checked in PHP?
- HTML | checked Attribute
- How to check whether a checkbox is checked in jQuery?
- HTML | <input>checked Attribute
- HTML | DOM Input Checkbox checked Property
- HTML | DOM Input Radio checked Property
- CSS | ::after Selector
- CSS | #id Selector
- CSS | ::before selector
- CSS | * Selector
- CSS | :not Selector
- CSS | :nth-child() Selector
- CSS | [attribute$=value] Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
