直接修改 checkbox 样式行不通，因浏览器强控渲染且 appearance 兼容性差；应隐藏原生 input（用绝对定位+透明度0保障无障碍），通过 label 关联并用伪元素绘制自定义样式。
为什么直接改 <input type="checkbox"> 样式行不通
浏览器对原生 <input type="checkbox"> 的渲染控制极强，appearance 虽能重置部分样式，但跨浏览器兼容性差（比如 Safari 旧版本不支持 appearance: none），且无法精细控制勾选图标、动画、焦点态。真正可控的方式是“隐藏真实 input，用 label 模拟视觉层”。
必须用 for 或嵌套确保 label 正确关联 input
label 和 input 的绑定失效，会导致点击无响应或键盘 Space 无法切换状态——这是最常被忽略的断点。
- 推荐写法：给
<input>设id="agree"，对应<label for="agree"></label> - 嵌套写法也合法：
<label><input type="checkbox"> 我同意</label>，但注意内部不能有其他可交互元素（如按钮），否则语义混乱 - 避免仅靠 DOM 顺序“碰运气”——没有
for也不嵌套，就等于没绑定
隐藏 input 的安全写法不是 display: none
display: none 或 visibility: hidden 会让屏幕阅读器完全忽略该控件，违反无障碍要求；同时某些浏览器下会中断 keyboard focus 流程。
正确做法是视觉隐藏但保留可访问性：
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 1px;
width: 1px;
padding: 0;
border: 0;
overflow: hidden;
}
这样 input 仍可被 tab 键聚焦、被屏幕阅读器读出，又不会占据布局空间。
用 ::before 和 ::after 绘制自定义勾选框
核心逻辑：label 作为容器，用伪元素画框和对勾，再通过 input:checked + label::before 切换状态。
- 先给 label 添加
position: relative，方便伪元素定位 -
label::before绘制外框（border / background），label::after绘制对勾（可用 SVG data URL 或 Unicode ✅） - 关键选择器：
input:checked + label::after控制对勾显隐；若用嵌套结构，则用input:checked + label::after不生效，得换成input:checked ~ label::after或直接用嵌套内的input:checked + span::after - 别忘了加
transition：对transform和opacity做动画比对background-color更平滑
for 属性只留 class，整个交互就静默失效了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
