W3cubDocs

/CSS

:checked

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

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

Formal syntax

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

Specifications

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 compatibility

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

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

Edit this page on MDN

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked