自定义复选框需隐藏原生控件但保留可访问性，用position: absolute + opacity: 0；通过:checked + label精准控制状态，label::before绘方框、::after绘对勾，并确保点击热区与focus样式完备。
复选框默认样式无法直接修改，必须用 input[type="checkbox"] 隐藏后重绘
浏览器对 input[type="checkbox"] 的原生控件样式限制极严，background、border-radius 等常规属性基本无效。真正可行的路径只有一条：视觉上隐藏原生控件，用其后的 label 或伪元素模拟外观，并靠 :checked 触发状态变化。
关键点在于不能用 display: none 或 visibility: hidden —— 这会让控件失去可访问性与焦点能力。推荐用以下方式“隐形但可用”：
-
position: absolute+opacity: 0（保留 tab 键聚焦和屏幕阅读器支持） - 配合
label[for="id"]或将input包在label内，确保点击 label 仍能触发勾选 - 后续所有样式都作用于
label::before/label::after或相邻的span元素
:checked + label 是最稳妥的相邻兄弟选择器写法
很多教程用 input:checked ~ label（通用兄弟），但容易误匹配非目标 label；更精准且兼容性更好的是紧邻兄弟：input:checked + label。前提是 HTML 结构中 label 必须紧跟在 input 后面，中间不能有其他元素。
示例结构必须这样写：
<input type="checkbox" id="agree"><label for="agree">我已阅读并同意条款</label>
而不是：
<input type="checkbox" id="agree"><span class="helper">(必选)</span> <label for="agree">我已阅读并同意条款</label>
后者会导致 input:checked + label 失效——因为中间插了 span，label 不再是“紧邻兄弟”。
用 label::before 绘制自定义方框，:checked + label::after 叠加对勾
核心技巧是把 label::before 当作背景方框，:checked + label::after 当作勾选标记。两者都设为 position: absolute，并用 top/left 对齐到 label 左侧文字前。
-
label::before负责绘制边框/圆角/背景色，尺寸建议16px × 16px，border: 2px solid #999 -
:checked + label::after画对勾：可用content: "✓"（字体图标）、content: ""+border构造斜线，或 SVG base64 - 务必设置
label { position: relative; padding-left: 28px; }，给伪元素留出空间，避免文字覆盖 - 若用字体符号（如
"✓"），注意不同系统渲染差异，iOS 和 Windows 字体可能显示粗细不一
移动端点击区域小、focus 样式缺失是高频翻车点
很多人做完 PC 端效果就上线，结果在手机上点半天点不中，或键盘用户无法通过 tab 导航——问题往往出在两个地方：
- 未扩大点击热区：
label::before尺寸太小（如仅14px），又没给label设置足够padding或min-height，导致触控命中率低 - 忽略 focus 状态：
input:focus + label::before应添加outline或阴影，否则键盘用户完全不知道当前焦点在哪 - 部分安卓 WebView 对
:checked + label::after动画支持弱，避免用transform: scale()做勾选入场，改用opacity更稳
真正可靠的自定义复选框，不是“看起来像”，而是“行为一致、可访问、可触达”。样式可以花哨，但结构和语义不能妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
