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...