---
title: ':checked'
slug: 'Web/CSS/:checked'
translation_of: 'Web/CSS/:checked'
---
<div>{{CSSRef}}</div>
<p><strong><code>:checked</code></strong> CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>选择器表示任何处于选中状态的<strong>radio</strong>(<code><input type="radio"></code>), <strong>checkbox </strong>(<code><input type="checkbox"></code>) 或("select") 元素中的<strong>option </strong>HTML元素("option")。</p>
<pre class="brush: css">/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
:checked {
margin-left: 25px;
border: 1px solid blue;
} </pre>
<p>用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。</p>
<div class="note">
<p><strong>Note:</strong>因为浏览器经常将<code><option></code>视为<a href="/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>,因此不同的浏览器通过<code>:checked</code>伪类渲染出来的效果也不尽相同.</p>
</div>
<h2 id="语法">语法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="基础示例">基础示例</h3>
<h3 id="Basic_example" class="hidden">Basic example</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Basic_example")}}</p>
<h3 id="借用隐藏的checkbox来切换元素的样式（显示隐藏）">借用隐藏的checkbox来切换元素的样式（显示/隐藏）</h3>
<h3 id="Toggling_elements_with_a_hidden_checkbox" class="hidden">Toggling elements with a hidden checkbox</h3>
<p>这个例子利用了<code>:checked</code>伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: 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;
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
<h3 id="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values" name="Using_hidden_radioboxes_in_order_to_store_some_CSS_boolean_values"><strong>图片相册</strong></h3>
<p>同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个<strong>只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，</strong>查看<a href="https://developer.mozilla.org/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">演示</a>。</p>
<div class="note"><strong>注:</strong> 一个类似的效果，基于<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a>伪类和没有隐藏的radioboxes，查看<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">这个演示</a>，来自<a class="internal" href="/en-US/docs/CSS/:hover" title="CSS/:hover">:hover</a>页面。</div>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规格</th>
<th scope="col"> 级别</th>
<th scope="col">附注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>Defines the semantic regarding HTML.</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 Basic UI') }}</td>
<td>Link to Selectors Level 3.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Defines the pseudo-class, but not the associated semantic</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.selectors.checked")}}</p>