移动端复选框必须隐藏原生控件并用label+伪元素实现，因原生input[type="checkbox"]是替换元素，width/height/appearance等属性在ios safari、android chrome及qq浏览器中受限或失效，且点击热区过小；需用clip:rect(0,0,0,0)隐藏、label扩展热区、focus-within处理焦点、兼顾深色模式与无障碍。
移动端复选框样式不能靠直接改 input[type="checkbox"] 实现，必须用伪元素 + 隐藏原生控件的方式，否则在 iOS Safari、Android Chrome 甚至 QQ 浏览器里要么失效，要么点击区域异常小。
为什么直接设置 width/height 不生效
原生 input[type="checkbox"] 是替换元素（replaced element），浏览器对其尺寸、边框、背景等 CSS 属性限制极严。即使写了 width: 24px; height: 24px;，iOS 上仍会按系统默认大小渲染，Android 也可能只缩放内部图标而不改变点击热区。
- Android Chrome 110+ 支持
appearance: none，但需配合aspect-ratio: 1才能稳定控形 - iOS Safari 对
appearance支持不完整，border-radius和background可能被忽略 - QQ 浏览器（尤其是旧版）完全不识别
:checked伪类，必须降级为 JS 控制显隐
推荐结构：label + 伪元素 + clip 裁剪
这是目前兼容性最稳、无障碍支持最好的方案，核心是把交互绑定到 label，视觉交给 ::before 或 ::after。
- HTML 必须用
for关联或包裹结构：<input type="checkbox" id="item1"><label for="item1">选项</label> - 隐藏原生控件用
clip: rect(0, 0, 0, 0)，而非display: none（否则键盘 tab 失效） -
label::before绘制外框，input:checked + label::before控制勾选态内容和背景 - 移动端需加
touch-action: manipulation防止 300ms 延迟影响点击响应
移动端点击区域太小怎么办
原生 checkbox 点击热区默认只有 12–16px，手指点不准。必须通过 label 扩展可点击范围，而不是试图放大 input 自身。
- 给
label设置最小高度（如min-height: 44px），并用padding或line-height确保垂直居中 - 避免用
margin扩展热区——它不参与点击判定 - 若用绝对定位伪元素，确保
label的position: relative，否则伪元素偏移不可控 - 在 iOS 上测试时，务必真机验证：模拟器可能误判点击坐标
特殊坑：iOS Safari 的 focus 样式不触发
当用户用键盘 tab 导航到复选框时，iOS Safari 不会触发 input:focus + label::before，但会触发 label:focus-within::before。
- 写焦点样式时，优先用
label:focus-within::before替代input:focus + label::before - 禁用状态要同时写
input:disabled + label::before和input:disabled:checked + label::before，否则已选禁用项的勾号可能残留 - 深色模式适配别只靠
prefers-color-scheme，某些 Android 定制系统会忽略，建议用系统颜色变量如color: CanvasText
真正难的不是画个好看的勾，而是让每个状态在每台手机上都响应一致——尤其是用户用拇指划着屏幕点下去那一瞬间，得有反馈、不飘、不错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
