Radio (<input type="radio">) and checkbox (<input type="checkbox">) elements can be toggled by the . Some menu items are “checked” when the selects them. When such elements are toggled “on” the :checked pseudo-class applies. 5vx6a

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 .

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 can toggle “off” such elements in which case it would no longer apply.

Radio and checkbox elements can be toggled by the , 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 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.

:checked {
    color: green;
}
                

input[type="checkbox"]:checked {
    width: 20px;
    height: 20px;
}

input[type="radio"]:checked {
    color: green;
}

option:checked {
    background-color: blue;
    color: white;
}