使用:checked伪类可纯CSS实现复选框自定义样式，通过隐藏原生控件并利用label模拟外观，结合+和~选择器控制相邻或后续元素样式，实现选中状态的视觉反馈与内容切换。
使用 :checked 伪类可以轻松为选中的复选框添加自定义样式。这个方法不需要 JavaScript，纯 CSS 即可实现视觉反馈。
基本原理
当用户勾选复选框时，其 checked 状态会被浏览器识别，CSS 中的 :checked 选择器就能捕中这个状态，并应用对应样式。HTML 中的复选框通常是这样的：
<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">点击选择</label>
改变选中时的外观
你可以隐藏默认的复选框，然后用 label 或其他元素模拟一个更美观的控件。 示例：自定义选中背景和图标 input[type="checkbox"] {opacity: 0;
position: absolute;
}
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;
}
input[type="checkbox"]:checked + label::before {
background-color: #4CAF50;
border-color: #4CAF50;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
color: white;
font-weight: bold;
position: absolute;
margin-left: -14px;
margin-top: 1px;
}
配合父级元素做整体样式切换
你还可以利用 :checked 控制其他相邻元素的样式，比如高亮整行或显示隐藏内容。 例如：选中时让整个 label 背景变蓝 input[type="checkbox"] + label {padding: 8px;
cursor: pointer;
}
input[type="checkbox"]:checked + label {
background-color: #e3f2fd;
border-radius: 4px;
}
扩展：控制后续元素显示
结合通用兄弟选择器（~），可以实现“选中后展开内容”效果。 input[type="checkbox"]:checked ~ .extra-content {display: block;
}
<input type="checkbox" id="toggle">
<label for="toggle">显示详情</label>
<div class="extra-content" style="display:none;">这里是额外内容</div>
基本上就这些。关键在于理解 :checked 如何与 DOM 结构配合，通过相邻或兄弟选择器影响其他元素。不复杂但容易忽略细节，比如隐藏原生 checkbox 和正确使用 label 关联。
