:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。

/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
:checked { 
  margin-left: 25px; 
  border: 1px solid blue; 
} 

用户通过勾选/选中元素或取消勾选/取消选中,来改变该元素的 :checked 状态。

Note:因为浏览器经常将<option>视为可替换元素,因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同.

语法

:checked

示例

基础示例

HTML

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in">
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}

/* Labels for checked inputs */
input:checked + label {
  color: red;
}

/* Radio element, when checked */
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Result

借用隐藏的checkbox来切换元素的样式(显示/隐藏)

这个例子利用了:checked伪类,让用户基于复选框的状态切换内容,而无需使用JavaScript。

HTML

<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
  </thead>
  <tbody>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more 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>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

CSS

/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}

/* Hide expandable content by default */
.expandable {
  visibility: collapse;
  background: #ddd;
}

/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}

/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

Result

图片相册

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

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

规范

规格  级别 附注
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
Recommendation Link to Selectors Level 3.
Selectors Level 3
:checked
Recommendation Defines the pseudo-class, but not the associated semantic

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 2Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5Safari iOS Full support 3.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

文档标签和贡献者

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