:checked伪类可改变选中状态的表单元素样式，常用于自定义复选框和单选按钮外观。通过隐藏原生input并结合label与伪元素，可创建带对勾或圆形选中效果的控件；利用+或~选择器还能控制其他元素显示，如实现无JS的折叠面板。该方法提升视觉交互且保持可访问性，适用于checkbox、radio等类型。
当用户与表单中的复选框（checkbox）或单选按钮（radio button）交互时，可以通过CSS的 :checked 伪类选择器来改变其样式。这个选择器能匹配处于“已选中”状态的 input 元素，常用于创建自定义的、更美观的控件外观，而无需依赖JavaScript。
基本语法与作用
:checked 选择器适用于 type 为 checkbox、radio 或 option 的元素。一旦这些元素被选中（例如用户点击了复选框），:checked 规则就会生效。
示例：input[type="checkbox"]:checked {
accent-color: green; /* 改变原生复选框颜色 */
}
上面的代码会将所有被选中的复选框的颜色改为绿色。这是最简单的用法，但若想完全自定义样式，通常需要配合隐藏原生控件并使用标签（label）和伪元素来实现视觉效果。
结合 label 和隐藏输入框实现自定义样式
为了更灵活地控制外观，常见做法是隐藏原始的 input，并利用 label 关联 input 来触发选中状态，再通过 + 或 ~ 选择器影响后续元素的样式。
立即学习“前端免费学习笔记（深入）”；
HTML 示例：
<input type="checkbox" id="custom-checkbox"> <label for="custom-checkbox">我同意条款</label>
CSS 示例：
/* 隐藏原生复选框 */
input[type="checkbox"] {
display: none;
}
<p>/<em> 自定义 label 样式 </em>/
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
}</p><p>/<em> 当复选框被选中时，添加对勾 </em>/
input[type="checkbox"]:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
content: "✔";
color: white;
font-size: 12px;
text-align: center;
line-height: 16px;
}
在这个例子中，label 前面的伪元素充当了可视化复选框。当 input 被选中时，:checked 状态触发，伪元素变为绿色并显示对勾。
控制其他元素的显示（如展开内容）
利用 :checked 还可以控制页面中其他元素的显示或布局变化，比如实现无 JavaScript 的折叠面板。
示例：点击复选框显示一段说明
<input type="checkbox" id="toggle-info"> <label for="toggle-info">点击查看说明</label> <div class="info-panel"> 这是一段被隐藏的信息。 </div>
CSS：
.info-panel {
display: none;
}
<h1>toggle-info:checked ~ .info-panel {</h1><p>display: block;
}
这里使用了通用兄弟选择器 ~，当复选框被选中时，后面的 .info-panel 会显示出来。这种技巧在制作FAQ、选项设置等场景非常实用。
单选按钮的样式控制
对于 radio 按钮，原理相同。可以用来创建自定义的圆形选中效果。
input[type="radio"] {
display: none;
}
<p>input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}</p><p>input[type="radio"]:checked + label::before {
background-color: #333;
box-shadow: inset 0 0 0 4px white; /<em> 内部白点效果 </em>/
}
这样就能做出类似移动端的圆形单选按钮，选中时中间有一个小白点。
基本上就这些。:checked 是一个强大且轻量的方式，让表单控件更具交互性和视觉吸引力，同时保持语义化和可访问性。关键是合理使用 label 关联和相邻/兄弟选择器来扩展样式控制范围。不复杂但容易忽略细节，比如隐藏原生控件时要确保仍可通过键盘访问。
