MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")) 。用户通过点击元素或选择其他的值,可以改变该元素的 :checked 状态,并:checked属性赋给一个新的对象(例如其他的option值)。

语法

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

示例

选择器示例

/* 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
表示页面上的所有选中的radio按钮
input[type="checkbox"]:checked
表示页面上的所有选中的checkbox按钮
option:checked
表示页面上的所有选中的select的选项

使用隐藏的checkboxes来存储一些CSS布尔值

:checked伪类用于隐藏checkboxes。以下示例说明了如何显示/隐藏一些可扩展的元素,只需一个单击按钮(下载示例)。

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

使用隐藏的radioboxes来存储一些CSS布尔值

同时,可以使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时,图片才会以全尺寸展示的图片相册,查看演示

注: 一个类似的效果,但基于在:hover伪类和没有隐藏radioboxes,看这个演示,来自:hover页面。

规范

规格  级别 附注
WHATWG HTML Living Standard
:checked
Living Standard No change.
HTML5
:checked
Recommendation Defines the semantic regarding HTML.
Selectors Level 4
:checked
Working Draft No change.
CSS Basic User Interface Module Level 3
:checked
Candidate Recommendation Link to Selectors Level 3.
Selectors Level 3
:checked
Recommendation Defines the pseudo-class, but not the associated semantic

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 2.1 1.0 (1.0) 9.0 9.5 3.1

 

文档标签和贡献者

 此页面的贡献者: hiyangguo, FrontENG, WarriorWu, wktdh
 最后编辑者: hiyangguo,