Definition and Usage
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.
Syntax
element:checked { style properties }
Examples
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 begin 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 simply clicking on a button.<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Expandable elements</title>
<style type="text/css">
#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;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
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;
-moz-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;
-webkit-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;
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.
Note: For an analogous effect, but based on :hover pseudo-class and without hidden radioboxes, see this demo, taken from the :hover page.
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 3.1 |
Mobile browsers
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 | 1.0 (1.0) | 9.0 | 9.5 | 3.1 |
