:checked伪类用于自定义选中状态的单选框和复选框样式，通过配合label、伪元素与兄弟选择器，可实现无JS的交互效果，如开关按钮、展开内容和模态框。
:checked 是 CSS 中的一个伪类，用于匹配处于“选中”状态的单选按钮（radio）和复选框（checkbox）。通过它，我们可以为用户已勾选的表单控件自定义样式，提升界面交互体验。这个伪类特别适用于创建无 JavaScript 的开关、模态框触发器或个性化选择控件。
基本语法与适用元素
:checked 只能应用于具有 checked 属性的表单元素，主要是 <input type="radio"> 和 <input type="checkbox">，也包括 <option>（在某些浏览器中）。
基本写法如下：
input[type="checkbox"]:checked {
accent-color: #4078c0;
}
input[type="radio"]:checked + label::before {
background-color: #005fcc;
}
改变默认外观
浏览器默认的复选框和单选按钮样式较为单调，使用 :checked 结合其他 CSS 技巧可以完全重绘它们的视觉表现。
立即学习“前端免费学习笔记（深入）”；
- 隐藏原始输入框：使用 appearance: none 或 display: none 移除默认样式。
- 用 ::before 或 ::after 伪元素绘制自定义图形。
- 利用 :checked 控制伪元素的显示状态，比如切换颜色、形状或添加对勾符号。
示例：自定义复选框
.custom-checkbox {
position: relative;
width: 20px;
height: 20px;
}
.custom-checkbox input {
appearance: none;
opacity: 0;
}
.custom-checkbox::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
background: white;
}
.custom-checkbox input:checked + .custom-checkbox::before {
background: #4078c0;
border-color: #4078c0;
}
.custom-checkbox input:checked + .custom-checkbox::after {
content: '✔';
position: absolute;
top: 1px;
left: 4px;
color: white;
font-size: 14px;
}
配合标签实现无JS交互
label 元素的 for 属性与 input 关联后，点击 label 即可触发 input 的选中状态变化。结合 :checked，可以控制其他元素的显示或样式，实现简单的交互效果。
常见用途包括：
- 制作开关按钮：滑块式 toggle，背景色随状态切换。
- 展开/收起内容：选中 checkbox 后，用 ~ 选择器显示隐藏区域。
- 灯箱或弹窗：用隐藏的 checkbox 触发 modal 显示。
示例：点击展开内容
#toggle {
display: none;
}
#content {
display: none;
}
#toggle:checked ~ #content {
display: block;
}
HTML 结构：
<input type="checkbox" id="toggle"> <label for="toggle">点击展开</label> <div id="content">这里是被隐藏的内容</div>
基本上就这些。合理使用 :checked 能增强表单的可用性和美观度，尤其适合轻量级交互场景，无需 JavaScript 也能实现动态效果。关键是理解其与 label、伪元素和兄弟选择器的配合方式。
