不能用 display: none 隐藏原生 checkbox，因为它会使控件脱离可访问性树和键盘焦点流，导致屏幕阅读器无法识别、tab 键跳过，丧失语义与交互能力；正确做法是用 position: absolute; clip: rect(0 0 0 0) 或 opacity: 0; pointer-events: none。
label 本身不渲染样式，但它是实现“点击文字控制表单控件”的关键桥梁；配合 :checked 和 ::before/::after，才能真正把复选框、单选框变成可定制的视觉组件。
为什么不能用 display: none 隐藏原生 checkbox
隐藏控件是自定义样式的前提，但 display: none 会让控件完全脱离可访问性树和键盘焦点流——屏幕阅读器读不到，Tab 键也跳过它，用户无法用键盘操作。
- 正确做法是用
position: absolute; clip: rect(0 0 0 0);或opacity: 0; pointer-events: none; - 前者更稳妥：保留语义、支持焦点、不影响
:checked状态检测 - 后者在部分旧版 Safari 中可能失效，且
opacity: 0仍会占用布局空间（需额外height: 0等补救）
:checked + label 选择器的结构硬约束
这个组合看似简单，实则对 HTML 顺序极其敏感：必须是 <input type="checkbox"><label>...</label>，且 label 是 input 的**紧邻下一个兄弟元素**。
- 如果中间插了空格、注释或
<span></span>，+就失效 - 嵌套写法（
<label><input>...</label>）不支持+，只能用input:checked + .icon或 JS 切换类 - 移动端 Safari 对相邻兄弟选择器解析更严格，建议用
input:checked ~ .icon（通用兄弟选择器）兜底
用 ::before 绘制自定义勾选符号的常见翻车点
多数人用 label::before 画图标，但容易忽略状态同步和尺寸控制。
- 必须给
::before设content: ""，否则不渲染 - 默认是行内级，要加
display: inline-block或block才能设宽高 - 未选中时靠
label::before显示空框，选中时靠input:checked + label::before改background或transform，别漏写transition - 字体图标（如 Font Awesome）建议用
font-family+content: "\f00c"，比 SVG 更轻量，且能随文字大小缩放
label 文本不可选却要支持复制？
为防误触常加 user-select: none，但这会阻止用户复制标签文字（比如邮箱、密码提示等场景）。
- 只对图标区域禁用：用
.icon { user-select: none; }，而非整个label - 若必须禁用整个 label，可用
pointer-events: none+ 在内部span上显式开启pointer-events: auto - 更干净的做法是放弃全局禁选，改用
cursor: pointer+ 清晰的 hover/active 样式来暗示可点击性
最易被忽略的是键盘交互：即使样式完美，没处理 Enter/Space 键触发，对键盘用户就是残障体验。纯 CSS 方案天然支持这些事件，前提是原生 input 没被 display: none 或 disabled 掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
