原生 checkbox 无法用 background-color 等样式控制，必须隐藏原生控件并用 label + 伪元素重绘；需确保结构语义正确、选择器精准联动、保留 input 可访问性属性。
原生 input[type="checkbox"] 无法直接用 background-color、border-radius 等样式控制——它压根不响应这些属性。真正可行的路只有一条：视觉上藏掉原生控件，用 label 和伪元素重绘 UI。
为什么 background-color 对 checkbox 没反应
浏览器对 input[type="checkbox"] 的渲染是平台原生控件（Windows 复选框、macOS Aqua 风格等），CSS 层面仅暴露极少数可样式化属性（如 accent-color 在部分新浏览器中可用）。你写的 background-color 或 border 实际作用于一个不可见的占位节点，不是用户看到的那个“方框”。
- 强行改
border或width通常无效，或只在某些浏览器中偶然生效 -
appearance: none是更现代的隐藏方式，但 IE 和旧版 Safari 不支持，且仍需配合opacity: 0或position: absolute保功能 - 最稳妥兼容方案仍是：
position: absolute; opacity: 0; width: 0; height: 0;
怎么用 label + ::before/::after 重绘方框和对勾
核心在于结构语义正确 + 选择器精准联动。必须确保 input 和 label 正确关联（推荐用包裹结构，而非 for/id），否则 :checked 状态无法触发伪元素变化。
- HTML 推荐写法：
<label class="custom-checkbox"> <input type="checkbox" name="agree"> 我已阅读并同意条款 </label>
- CSS 中用
input:checked + .checkmark或input:checked ~ .checkmark控制状态切换（注意兄弟选择器要求元素同级） -
.checkmark::after绘制对勾时，content: ""必须存在，否则伪元素不渲染；opacity: 0 / 1配合transition实现淡入，比display: none/block更平滑 - 不要用
transform: scale()放大整个label，会导致内部文字模糊、点击热区错位
:checked 伪类不生效的常见原因
写完样式发现勾选后外观不变，大概率是选择器链断了，或者 DOM 结构/层级不匹配。
立即学习“前端免费学习笔记（深入）”；
-
input必须是label的直接子元素，才能用+相邻选择器；若中间有其他标签（如span），需改用~通用兄弟选择器或重构 HTML -
.checkmark元素必须是block或inline-block，否则::before/::after的宽高、定位可能失效（尤其在 IE11 中） - 未设置
user-select: none时，双击 label 文字可能触发文本选中，干扰交互体验 - 焦点管理容易被忽略：
input:focus + .checkmark应搭配outline: none和自定义焦点样式（如外发光），否则键盘用户无法感知当前聚焦项
无障碍与可访问性不能只靠“看起来像”
隐藏原生控件后，若不做额外处理，屏幕阅读器可能读不出状态，键盘 Tab 也无法聚焦到这个“复选框”。
-
input本身必须保留在 DOM 中（不能用display: none或visibility: hidden），这是可访问性的基础 - 必须保留
name和value属性，否则表单提交时值会丢失 - 建议加
aria-checked同步状态（虽然现代浏览器大多能自动推断，但显式声明更稳妥） - 用
focus-visible区分鼠标与键盘聚焦：.custom-checkbox input:focus-visible + .checkmark { box-shadow: 0 0 0 2px rgba(0,130,118,.3); }
最复杂的点不在画方框或对勾，而在于让这个“假控件”在所有交互路径下（鼠标、键盘、屏幕阅读器、高对比度模式）都表现得和原生一样可靠。样式可以炫酷，但结构语义和状态同步一旦松动，就会在某个用户身上彻底失效。
