CSS Reference Pseudo-class

:checked

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

View this demo on the Codrops Playground

Browser Support

The :checked pseudo-class is supported in Chrome, Firefox, Safari, Opera 9+, Internet Explorer 9+, and on Android and iOS.

Written by

Last updated February 3, 2015 at 12:34 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.