Radio (<input type="radio">) and checkbox (<input type="checkbox">) elements can be toggled by the user. Some menu items are “checked” when the user selects them. When such elements are toggled “on” the :checked pseudo-class applies.
So, :checked is used to select and style checkbox (<input type="checkbox">), radio (<input type="radio">) or option (<option></option> in a <select></select>) that are checked or toggled “on” by the user.
The following radio buttons and checkboxes can be toggled on and off.
View this demo on the Codrops Playground
It is also used to select radio and checkbox items whose checked attribute is explicitly set by the author, or select options whose selected attribute is explicitly set.
<input type="radio" checked>
<input type="checkbox" checked>
<select name="options" id="list">
<option value="Something" selected>This option is selected</option>
<option value="Something-else">This one is not</option>
</select>
The :checked pseudo-class initially applies to these elements, but of course the user can toggle “off” such elements in which case it would no longer apply.
Trivia & Notes
Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. This can be due to an element attribute, or DOM manipulation. Such elements can be styled using the :indeterminate pseudo-class.
Styling :checked input labels can be very useful for making these inputs more accessible. Any visual cues that help the user tell the difference between two states is always useful. For example, the following example uses a todo-list-like approach to strike out labels whose checkbox is checked.
<input type="checkbox"id="todo">
<label for="todo">Buy Milk</label>
input[type = "checkbox"]:checked + label {
text-decoration: line-through;
color: grey;
}
Check the checkbox in the following demo to see it in action.
View this demo on the Codrops Playground
In addition to that, the :checked pseudo-class can be used to mimic event handlers using CSS only. There is an insightful article by Ryan Seddon on how to style custom radio inputs and checkboxes that introduces a great technique: Custom radio and checkbox inputs using CSS. You can read more about that kind of technique in the CSS Click Events article here on Codrops.
Examples
The following snippet styles any checked or selected input or select option.
:checked {
color: green;
}
The following examples style checkbox, radio, and select options that are checked and selected, respectively, using CSS attribute selectors.
input[type="checkbox"]:checked {
width: 20px;
height: 20px;
}
input[type="radio"]:checked {
color: green;
}
option:checked {
background-color: blue;
color: white;
}
Live Demo
Toggle the checked and selected state of the checkboxes, radio buttons, and select options in the following demo to see their :checked styles applied (and removed).
Browser Support
The :checked pseudo-class is supported in Chrome, Firefox, Safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.
