:checked 可触发 checkbox 样式切换，需将 input 与 label 正确绑定，隐藏原生 checkbox 应用 position: absolute; opacity: 0; pointer-events: none;，再通过伪元素实现可访问的自定义样式。
怎么用 :checked 触发 checkbox 样式切换
原生 checkbox 无法直接改外观，但浏览器允许你隐藏它，再用相邻的 label 或伪元素模拟。关键在于：只有当 checkbox 处于选中状态时，:checked 才生效，且必须和目标元素有明确的 DOM 关系（比如兄弟或父子）。
- 最稳妥写法是把
input[type="checkbox"]放在label内部，或用for和id绑定，否则点击 label 不会触发状态变更 -
:checked只能作用于input[type="checkbox"]和input[type="radio"]，对div或自定义组件无效 - 别试图用
:checked + .custom-box去控制远距离元素——如果中间插了别的标签，选择器就断了
隐藏原生 checkbox 的三种常见错误写法
很多人用 display: none 或 visibility: hidden 隐藏 checkbox，结果发现点击没反应、键盘 Space 无法切换、屏幕阅读器也读不到。这不是 bug，是预期行为。
-
display: none→ 元素完全脱离渲染树，交互能力归零 -
visibility: hidden→ 元素仍占布局空间，但不可见、不可交互 - 正确做法是用
position: absolute; opacity: 0; pointer-events: none;或clip-path: inset(50%);—— 既隐藏又保留可访问性
用 ::before / ::after 画自定义勾选图标
真正可控的视觉替换，靠的是在 label 上叠加伪元素，并用 :checked 控制其状态。注意伪元素默认不继承 content，且必须设 display 才能显示。
- 先给
label设相对定位：position: relative; - 在
label::before里画方框，label::after画对勾（用content: "✓"或 SVG 路径） - 通过
input:checked + label::after显示对勾，用transform: scale(1)比单纯opacity更顺滑 - 别忘了加
user-select: none;，否则双击 label 可能触发文字选中
移动端点击区域小、响应延迟怎么办
默认 checkbox 的点击热区只有几像素，iOS Safari 还有约 300ms 点击延迟。光换样式不扩区域，用户实际体验还是差。
立即学习“前端免费学习笔记（深入）”；
- 给
label设置最小宽高（如min-width: 24px; min-height: 24px;），再用padding扩展可点范围 - 加
touch-action: manipulation;消除 iOS 300ms 延迟 - 避免在
label上写font-size: 0;后又忘设伪元素的字体大小——会导致对勾图标缩成一个点 - 真机测试时重点看「手指按下去那一瞬间」是否立刻反馈，而不是只看最终状态
最麻烦的不是画得像不像，而是让所有状态（聚焦、禁用、高对比度模式、键盘导航）都自然可用。很多“完美视觉”方案一加 disabled 就崩，或者 Tab 切过去看不见焦点环——这些细节比对勾动画重要得多。
