appearance: none 不够用，因其在 firefox 和 safari 15.4 前不生效，需三前缀齐写；清空后还需重设宽高、box-sizing、vertical-align，并绑定 label 扩大热区。
为什么 appearance: none 不够用
直接写 appearance: none 看似一步到位，但实际在 Firefox 和旧版 Safari 里根本不管用——Firefox 会忽略它，Safari 15.4 之前只认 -webkit-appearance: none，而 IE 完全不支持。更麻烦的是，即使清掉了原生样式，Chrome 和 Edge 下 checkbox/radio 的默认尺寸、垂直对齐、焦点轮廓依然不一致，导致 label 对不齐、热区偏移、键盘导航跳过等问题。
所以真正要“统一”，不是只靠一个属性，而是三步并行：清空渲染、重设基础盒模型、绑定 label 扩大可点击区域。
- 必须同时写全三个前缀：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 立即设置
width和height（不能依赖默认值，各浏览器默认宽高从 13px 到 20px 不等） - 加
box-sizing: border-box，避免边框/内边距影响最终尺寸 - 显式声明
vertical-align: middle，否则和文字基线对不齐，尤其在移动端 line-height 变化时明显
用 ::before / ::after 替代背景图实现跨浏览器兼容
背景图方案（比如用 sprite 图切换 :checked 状态）在 IE 和部分安卓 WebView 里容易出错：图片加载失败、background-position 偏移、缩放失真。而伪元素方案纯 CSS、无资源依赖、支持 transition 动画，且所有现代浏览器（包括 iOS Safari 14+、Android Chrome 80+）都稳定支持。
关键点在于：伪元素必须定位在 input 内部视觉区域，且不能干扰表单语义和可访问性。
-
position: relative加在input[type="checkbox"]上，为伪元素提供定位上下文 - ::before 画边框和未选中态（比如圆角矩形或空心圆），::after 画选中态图标（✓ 或 ●），用
content: ""触发渲染 - 选中态切换靠
input:checked + label::before或input:checked::after，推荐后者，减少 DOM 结构耦合 - 动画仅作用于 transform 和 opacity，避免触发布局重排；不要对 background-color 做过渡，Firefox 里可能卡顿
label 必须显式绑定，否则移动端点击失效
很多开发者以为把 checkbox 放在 label 里就自动关联了，但其实只有两种方式真正可靠：一是 for 属性匹配 id，二是 checkbox 直接嵌套在 label 标签内。前者在 Vue/React 等框架里容易因动态 id 生成出错，后者更稳。
移动端尤其要注意：原生 checkbox 点击热区只有 16×16px 左右，手指点不准极易误操作。label 是唯一能安全扩大的手段。
- 写法必须是：
<label><input type="checkbox"> 我已阅读</label>，而不是<label for="xxx">...</label><input id="xxx">（除非你确保 id 全局唯一且不被 SSR/SSG 注入污染） - label 需加
display: inline-flex或cursor: pointer，明确提示可点击 - 避免给 input 设置
pointer-events: none，这会让屏幕阅读器无法聚焦，破坏无障碍
IE 和老安卓 WebView 的兜底处理
如果你的项目还要求支持 IE11 或 Android 4.4 WebView，那 appearance 和伪元素方案都会失效。这时候只能退到「视觉降级 + 行为保全」策略：不追求样式统一，但确保功能可用、状态可读、焦点可操作。
核心不是“怎么让它好看”，而是“怎么让它不崩”。
- 用
@supports not (appearance: none)包裹现代样式，让老浏览器跳过整段规则 - 对 IE11 单独加 hack：
input[type="checkbox"] { *zoom: 1; }强制 hasLayout，防止 label 错位 - 老安卓 WebView 中，
::after在:checked下可能不触发，改用label::after配合input:checked + label选择器更稳妥 - 永远保留原生控件的
tabindex和aria-checked属性，别用 div 模拟 checkbox
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
