最干净可控的美化方式是 appearance: none 配合 ::before/::after，但必须完整处理 :checked、:focus、:disabled、:indeterminate 四种状态；仅用 opacity: 0 + position: absolute 隐藏原生 checkbox 会损害可访问性。
直接用 appearance: none 配合 ::before 或 ::after 是当前最干净、最可控的美化方式；但必须处理 :checked、:focus、:disabled 和 :indeterminate 四种状态，漏掉任一状态都会导致可访问性或体验断裂。
为什么不能只靠 opacity: 0 + position: absolute 隐藏原生 checkbox
这种写法虽兼容老浏览器，但存在两个硬伤：一是部分屏幕阅读器仍会读出被遮盖的控件（尤其在 Safari + VoiceOver 组合下），二是 outline 焦点框可能错位或消失，键盘用户无法感知当前焦点位置。而 appearance: none 是语义化隐藏，浏览器明确知道该控件已被样式接管，能更好配合辅助技术。
实际建议：
- 优先写
appearance: none，再补-webkit-appearance: none和-moz-appearance: none前缀（2026 年仍需兼容 Firefox ESR 和旧版 Chrome） - 保留
outline: none，但必须用:focus-visible单独加回焦点样式，否则键盘导航失效 - 不要用
visibility: hidden或display: none—— 这会让控件完全不可交互、不可聚焦
::before 伪元素绘制方框时的尺寸与定位陷阱
伪元素默认是 inline 的，vertical-align 和父 label 的行高、字体大小强耦合，稍不注意就会上下偏移。更稳定的做法是把 label 设为 display: inline-flex 或 display: flex，再让伪元素用 flex 居中。
常见错误现象：
- 勾号图标在高 DPI 屏幕上模糊 —— 用
transform: translate(-50%, -50%)替代top/left百分比定位 - 方框边缘发虚 —— 加
backface-visibility: hidden或will-change: transform强制硬件加速 - 点击 label 无响应 —— 检查
input和label是否满足“相邻兄弟”或“for关联”，:checked + label::before要求input紧邻label前面
content 插入 Unicode 勾号 vs SVG data URI 的取舍
用 content: "\2713" 最轻量，但颜色、粗细、对齐都受限；用 background-image: url("data:image/svg+xml,...") 可控性强，支持 currentcolor 动态变色，但 base64 编码过长会拖慢 CSS 解析。
推荐组合：
- 简单项目：用
content+font-family: "Segoe UI", "Helvetica"保证勾号渲染一致 - 设计系统级项目：用内联 SVG，转成 data URI 后压缩 whitespace，再通过 CSS 变量控制 fill 颜色，例如
fill: var(--checkbox-check-color, #007bff) - 避免用外部 SVG 文件 —— 多一次 HTTP 请求，且无法响应
:checked状态切换
:indeterminate 状态常被忽略，但真实场景中很关键
当复选框代表“部分选中”（如树形结构中子项不全勾选），原生 indeterminate 属性必须由 JS 设置，CSS 中则需单独声明 input[type="checkbox"]:indeterminate::before 样式。只写 :checked 会导致这部分状态视觉丢失，用户误以为未生效。
实操要点：
- JS 设置：必须用
el.indeterminate = true（不能用setAttribute） - CSS 匹配：必须显式写
input[type="checkbox"]:indeterminate::before，不能合并进:checked规则 - 视觉建议：用短横线
content: "–"或中间圆点，颜色设为中性灰，避免和:checked混淆
真正难的不是画个好看方框，而是让所有状态都有对应反馈、所有操作路径（鼠标、空格键、Tab 导航、屏幕阅读器）都走通 —— 这些细节一旦漏掉，美化就变成了障眼法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
