CSS :checked selector is used to select and style an element that is in the checked or the selected state. This includes the checkboxes, radio buttons and the options of the dropdowns.
For example, if we apply the :checked selector on the checkboxes, it will only select those checkboxes that are selected by the user.
See this example:
Example:
input[type='checkbox']:checked{
width: 20px;
height: 20px;
}
Similarly, you can apply the :checked selector to style the selected radio buttons.
See this example:
Example:
input[type='radio']:checked{
width: 20px;
height: 20px;
}
Just like the checkboxes and radio buttons, you can also use the :checked selector to style the selected option of a dropdown.
The :checked selector in the following example sets a springgreen background to the selected option of the dropdown.
See this example:
Example:
option:checked{
background: springgreen;
}
CSS Syntax
The syntax of the :checked selector is as follows:
:checked{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :checked selector.
| Selector | |||||
| :checked | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
