:checked

:checked伪类选择器表示任何在单选按钮（<input type="radio">），复选框（<input type="checkbox">）或选项（一个<select>中的<option>）中被选择或切换到on状态的元素。用户可以通过单击该元素来或者选择一个不同的值来改变这个状态，在这种情况下:checked伪类不再适用于这个元素，而是适用于相关的元素。

/* selects any checked/selected radio, checkbox, or option */
input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

语法

:checked

实例

示例选择器

/* 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代表页面上的所有被选择的单选按钮

input[type="checkbox"]:checked表示页面上的所有被选择的复选框

option:checked代表的页面上的所有被选择的选项

使用隐藏复选框来存储某些css布尔值

应用于页面开头的隐藏复选框的:checked伪类可以用来顺序存储一些CSS规则要使用的动态布尔值。以下示例显示了如何通过单击按钮来隐藏/显示某些可展开的元素（下载此演示）。

<!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>

使用隐藏的单选框来存储一些CSS布尔值

您还可以使用应用于隐藏单选框的:checked伪类，以便构建例如只有当鼠标点击预览时才显示全尺寸图像的图片库。见这个演示。

注：对于类似的效果，但是基于:hover伪类和无隐藏的单选框，请参阅这个演示。

规范

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

浏览器兼容性

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

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	1.0 (1.0)	9.0	9.5	3.1

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18