使用:checked + label可实现无JavaScript的自定义复选框，通过隐藏原生输入框并利用伪元素为关联label创建视觉样式，当复选框选中时改变相邻label的外观，实现美观交互效果。
使用 :checked + label 可以在不依赖JavaScript的情况下，实现自定义复选框样式。核心思路是利用复选框的选中状态来控制其后相邻的 label 元素的外观，从而隐藏默认复选框并展示更美观的自定义样式。
基本HTML结构
要实现这种效果，HTML中需要将 input[type="checkbox"] 和对应的 label 按正确顺序排列，且使用 for 属性或嵌套方式建立关联：
注意：CSS中的 + 是相邻兄弟选择器，意味着 label 必须紧跟在 input 后面，否则无法生效。
隐藏默认复选框
首先将原生的复选框隐藏，但保留其功能：
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"] {position: absolute;
opacity: 0;
width: 0;
height: 0;
}
这样复选框仍可点击（通过label触发），但视觉上不可见。
定义默认label样式
为 label 设置自定义复选框的“未选中”外观：
display: inline-block;
padding-left: 28px;
position: relative;
cursor: pointer;
}
label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
}
这里用伪元素 ::before 模拟一个方形框作为自定义复选框。
通过:checked改变相邻label样式
当复选框被选中时，使用 :checked + label 修改其后相邻的 label 的伪元素，添加对勾或背景色：
border-color: #007bff;
background-color: #007bff;
}
label::after {
content: '✓';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 12px;
opacity: 0;
}
input[type="checkbox"]:checked + label::after {
opacity: 1;
}
选中状态下显示白色对勾，提升视觉反馈。
完整示例说明
整个机制依赖于：
- 复选框与label在DOM中相邻
- label的
for属性指向input的id - CSS使用
:checked + label精准控制相邻label样式 - 伪元素模拟图形，避免额外DOM节点
用户点击label时，会触发input状态切换，从而更新样式，实现完全自定义的复选框效果。
基本上就这些，不复杂但容易忽略细节，比如元素顺序和定位控制。只要结构正确，样式就能正常响应。
