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