必须隐藏原生控件并用伪元素重绘，因浏览器不响应background-color等属性；appearance: none需配合-webkit/-moz前缀及position: absolute、opacity: 0等确保兼容性与可访问性。
不能直接改 input[type="checkbox"] 的背景或边框——浏览器根本不认这些属性。必须隐藏原生控件，用伪元素重绘，同时保留可访问性。
为什么 appearance: none 不够用？
单独设 appearance: none 只是去掉默认样式，但不同浏览器对它的支持不一致（尤其 Safari 旧版本），且它不解决尺寸控制、焦点丢失、屏幕阅读器兼容等问题。真正安全的做法是组合使用：-webkit-appearance: none + -moz-appearance: none + appearance: none，再配合 position: absolute 和 opacity: 0 或 clip 隐藏。
常见错误：只写 display: none 或 visibility: hidden —— 这会让控件无法 tab 聚焦、无法被屏幕阅读器识别，也失去点击响应能力。
-
clip: rect(0, 0, 0, 0)比opacity: 0更彻底地移出渲染流，但需确保父容器没有overflow: hidden截断 - 若用
opacity: 0，必须加position: absolute，否则仍占文档流位置，影响布局 - 推荐结构：把
input放在label外部，用for/id关联，而非包裹——更利于语义化和键盘导航
如何用 :checked + label 精准触发状态变化？
:checked + label 是最可靠的写法，前提是 HTML 中 label 必须紧挨着 input 后面，中间不能插任何其他元素。一旦中间有空格、注释或文本节点，选择器就失效。
立即学习“前端免费学习笔记（深入）”；
别用 :checked ~ label：它会匹配所有后续同级 label，容易误触非目标控件，尤其在表单字段密集时。
- 结构示例必须严格按顺序：
<input type="checkbox" id="agree"><label for="agree">我同意</label> - 如果用 class 区分类型（如
.custom-checkbox），选择器应写成.custom-checkbox:checked + .custom-checkbox-label，避免全局污染 - 选中态样式建议统一用
background-color+border-color控制主色，不要依赖 background-image —— SVG 或 PNG 对勾图在深色模式下可能反色失败
怎么画对勾且保证可访问性？
用 label::after 插入 Unicode 字符 '\2713' 最轻量，但字体渲染不一致；用 SVG 内联更可控，但体积略大。无论哪种，都必须配 aria-hidden="true"（如果对勾只是装饰）或留空 aria-label（如果它是唯一视觉反馈）。
关键细节常被忽略：
- 未选中态的
label::before必须设content: ""并显式声明display: inline-block，否则伪元素不渲染 - 对勾动画要用
transform: scale(0)→scale(1)，而不是opacity，避免模糊或锯齿 - 必须为
:focus-visible添加清晰的 outline（如outline: 2px solid #007bff），否则键盘用户找不到当前焦点 - 禁用态（
:disabled）要同时作用于input和label，比如降低 opacity 并灰掉颜色
深色模式与响应式适配要注意什么？
别硬编码 #007bff 这类颜色值。用 CSS 变量（如 --check-bg）配合 @media (prefers-color-scheme: dark) 切换，或者直接绑定系统色（color-scheme: light dark + background-color: Field）。
尺寸方面，用 em 或 rem 替代固定像素值，让复选框随基础字号缩放；aspect-ratio: 1 比手动设宽高更健壮，尤其在缩放或动态字体场景下。
- 避免用
font-size控制复选框大小——它只影响文字，不影响伪元素尺寸 - SVG 对勾图记得加
fill="currentColor"，这样能自动继承父级文字颜色，适配主题切换 - 移动端点击热区至少保证 44×44px，可通过
padding扩展label，而不是只放大控件本身
最难的部分不是画方框或对勾，而是让所有状态（focus、hover、disabled、indeterminate）在各种设备、辅助技术和配色方案下都行为一致。漏掉任意一个，就等于把可访问性缺口直接暴露给真实用户。
