不能直接改 input[type="checkbox"] 样式，因浏览器硬编码渲染、忽略 border/background/width 等属性；必须隐藏原生控件，通过 label 关联 + :checked 触发伪元素样式。
为什么不能直接改 input[type="checkbox"] 的样式
浏览器对原生复选框的渲染是硬编码的，border、background-color、width 等属性在多数浏览器中会被忽略。强行设置可能只在部分 Chrome 版本生效，Firefox 和 Safari 基本无视。这不是 bug，是规范限制 —— 表单控件的可访问性优先级高于样式自由度。
必须用 label 关联 + :checked 触发样式切换
核心逻辑是：隐藏真实复选框，靠 label 承担点击区域，再用相邻兄弟选择器（+）或子元素关系把状态映射到可视元素上。不关联 label，键盘用户按空格键无法触发，屏幕阅读器也读不出状态。
-
input[type="checkbox"]必须有id，对应label[for="xxx"]，否则点击 label 不会 toggle - 推荐用
display: none隐藏原生框（比appearance: none兼容性更稳，尤其在旧版 Safari） - 所有自定义样式（边框、对勾、动画）都写在
label::before或label::after上，而不是input本身 -
input:checked + label::before是最常用且可靠的触发链，避免使用~（通用兄弟）增加不可控性
:checked 状态下用 ::after 插入 Unicode 对勾的风险点
用 content: "13" 或 "✔" 看似简单，但实际容易出问题：
- 字体缺失时显示方块或问号（尤其 Windows 上默认不带 Symbola 字体）
- 不同字号下对勾位置偏移，
vertical-align和line-height很难对齐 - 无法做颜色渐变或描边，纯色填充是唯一可控方式
- 更稳妥的做法是用 SVG 内联或 base64 编码的
background-image，或者用clip-path绘制对勾路径
批量应用时 class 命名与作用域控制
如果页面里有多个风格的复选框（比如表单用圆角蓝框，表格用无边框灰点），别用全局 input[type="checkbox"] 选择器。容易互相覆盖，调试困难。
立即学习“前端免费学习笔记（深入）”；
- 给每组复选框加独立 class，如
class="form-checkbox"或class="table-checkbox" - CSS 写成
.form-checkbox input[type="checkbox"]开头，确保样式隔离 - 禁用状态（
:disabled）必须单独处理：不仅要灰掉背景，还要加cursor: not-allowed和降低对比度（满足 WCAG 1.4.3） - 焦点态（
:focus）不能省：键盘用户 Tab 到复选框时，必须有清晰可见的 outline 或 shadow，否则违反可访问性底线
:focus-within 或忘记 prefers-reduced-motion 的动画，上线后就可能被辅助技术用户投诉。 
