The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

SyntaxEdit

input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Formal syntax

How to read CSS syntax.
element:checked { style properties }

ExamplesEdit

Example selectors

/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}

/* only radio elements */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none;  
}

/* only option elements */
option:checked {
  color: red;
}
input[type="radio"]:checked
Represents all radio buttons on the page that are checked
input[type="checkbox"]:checked
Represents all checkboxes on the page that are checked
option:checked
Represents all select's options on the page that are selected

Using hidden checkboxes in order to store some CSS boolean values

The :checked pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (download this demo).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Expandable elements</title>
<style>
#expand-btn {
    margin: 0 3px;
    display: inline-block;
    font: 12px / 13px "Lucida Grande", sans-serif;
    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #969696;
    cursor: default;
    border-radius: 3px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
    background: #B5B5B5;
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded, .expandable {
    display: none;
}

#isexpanded:checked ~ * tr.expandable {
    display: table-row;
    background: #cccccc;

}

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}
</style>
</head>
<body>

<input type="checkbox" id="isexpanded" />

<h1>Expandable elements</h1>
<table>
    <thead>
        <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
    </thead>
    <tbody>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    </tbody>
</table>

<p>[some sample text]</p>
<p><label for="isexpanded" id="expand-btn">Show hidden elements</label></p>
<p class="expandable">[another sample text]</p>
<p>[some sample text]</p>
</body>
</html>

Using hidden radioboxes in order to store some CSS boolean values

You can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews. See this demo for a possible cue.

Note: For an analogous effect, but based on :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover page.

SpecificationsEdit

Specification Status Comment
WHATWG HTML Living Standard
The definition of ':checked' in that specification.		 Living Standard No change.
HTML5
The definition of ':checked' in that specification.		 Recommendation Defines the semantic regarding HTML.
Selectors Level 4
The definition of ':checked' in that specification.		 Working Draft No change.
CSS Basic User Interface Module Level 3
The definition of ':checked' in that specification.		 Candidate Recommendation Link to Selectors Level 3.
Selectors Level 3
The definition of ':checked' in that specification.		 Recommendation Defines the pseudo-class, but not the associated semantic

Browser compatibilityEdit

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1

 

Document Tags and Contributors

Tags: 
 Contributors to this page: Tigt, teoli, psylar, Sebastianz, johndrinkwater, fscholz, jsx, mariankh, MusikAnimal, kottkrig, kscarfone, Sheppy, ethertank, fusionchess, brianloveswords, Dimitar_Bonev, McGurk, jswisher, chevalric, leaverou, BijuGC
 Last updated by: Tigt,