现代浏览器用 appearance: none + 伪元素是最干净的方案；ie10及以下必须放弃原生 input[type="checkbox"] 的样式控制，改用 label + 隐藏 input + 伪元素模拟，因 ie 完全不支持 appearance，且伪元素无法作用于 input，需依赖兄弟选择器与 clip 或 absolute 隐藏确保可访问性与兼容性。
直接说结论：现代浏览器用 appearance: none + 伪元素是最干净的方案；IE10及以下必须放弃原生 input[type="checkbox"] 的样式控制，改用 label + 隐藏 input + 伪元素模拟。
为什么不能只靠 appearance: none
这个属性在 Chrome/Firefox/Safari 中确实能清掉默认样式，但 IE 完全不支持（包括 IE11），Edge 12–18 也仅部分支持。更麻烦的是，即使清掉了外观，input 本身仍不可缩放、无法用 font-size 控制大小，且不同浏览器对 box-sizing 和 vertical-align 的默认处理不一致——导致 label 对齐错位是高频问题。
常见错误现象：label 文字在 Firefox 中偏高，在 IE 中贴底，Chrome 里又略右移；选中状态图标位置飘忽；禁用态视觉反馈缺失。
- 务必配合
clip: rect(0, 0, 0, 0)或position: absolute; opacity: 0隐藏原生控件，而不是只靠appearance - 所有尺寸建议用
em或rem，避免像素硬编码 —— 否则缩放页面时自定义框会和文字失比 -
vertical-align: middle必须加在label或伪元素上，不能只设在input上
IE9–IE11 的兜底方案怎么写
IE 不识别 appearance，也不支持 ::before 在 input 上生效，所以必须把交互逻辑“转移”到 label 上。核心是让 label 可点击、可聚焦、可响应 :checked 状态。
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
典型结构：
<input type="checkbox" id="agree"><label for="agree">我已阅读并同意</label>
关键 CSS：
-
input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); }—— 比opacity: 0更可靠，避免 IE 下仍能 tab 到却不可见 -
label::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 0.5em; vertical-align: -0.15em; }—— 用伪元素画框，vertical-align值需实测调整（IE 对负值更敏感） -
input:checked + label::before { background: #4CAF50; }—— 利用兄弟选择器，IE9+ 支持 - 禁用态要显式写
input:disabled + label::before { opacity: 0.6; cursor: not-allowed; }，否则 IE 下 label 仍可点
Chrome/Firefox/Safari 的现代写法要注意什么
虽然 appearance: none 是起点，但光清样式不够。比如 Chrome 默认保留 focus outline，Firefox 对 aspect-ratio 支持晚（v110+），Safari 对 background-color 在深色模式下可能不随系统色变。
- 必须补全前缀：
-webkit-appearance: none;、-moz-appearance: none;，哪怕现代版本已不需要，老版本用户还在 - 用
background-color: Field;而不是#f0f0f0，才能适配系统深色/浅色模式（Field是 CSS 系统颜色关键字） - 打勾符号建议用 SVG 背景图或
content: "✓"+font-family: system-ui，避免 Unicode 在某些字体下渲染异常 - focus 状态别只靠
outline，加box-shadow更可控，例如：input:focus + label::before { box-shadow: 0 0 0 2px #007bff, 0 0 0 4px rgba(0,123,255,0.2); }
最易被忽略的一点：无障碍支持不是“加上 aria-checked”就完事。真实场景中，屏幕阅读器依赖原生 input 的语义，所以无论怎么美化，input 本身必须保留在 DOM 中、有正确 id 和 for 关联，且不能 display: none 或 visibility: hidden —— 否则视障用户根本点不到、读不出状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
