原生 checkbox 无法用 background-color 等常规属性修改，因其样式由浏览器 UA 强锁定；唯一稳定可访问方案是隐藏原生控件（position: absolute + opacity: 0 + pointer-events: none），再通过 label 与伪元素重绘，并确保 focus、键盘操作及屏幕阅读器支持。
原生 <input type="checkbox"> 的样式无法用 background-color、border 等常规属性直接修改——不是你写错了，是浏览器根本不响应。唯一稳定、可访问、跨浏览器可行的方案，就是隐藏它，再用 label 和伪元素重画。
为什么直接改 input[type="checkbox"] 样式没用
Chrome、Firefox、Safari 对原生 checkbox 的 UA 样式做了强锁定：background-color 在未选中态基本无效，width/height 可能被忽略，border-radius 在部分版本里只影响 :checked 态。试图靠 appearance: none 单独清样式也不保险：Safari 有时仍留白边，IE/Edge 需额外处理 ::-ms-check，且清完后若不补交互层，控件就“点不动”了。
常见错误现象：
-
input[type="checkbox"] { background: red; }—— 页面毫无变化 - 加了
transform: scale(1.5)后文字模糊、对齐错位 - 用
display: none隐藏后，屏幕阅读器读不到，键盘Tab也跳过
正确隐藏原生 checkbox 的三要素
必须同时满足以下三点，才能既保留功能又释放样式控制权：
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute移出渲染流（比opacity: 0更稳妥，避免 Safari 点击穿透） - 保留
width: 0; height: 0;或显式设为0，防止占位干扰布局 - **不能**用
display: none或visibility: hidden，否则破坏可访问性（ARIA 不识别、Tab键失效）
推荐写法：
.custom-checkbox input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
用 label + ::before 构建可点击视觉层
关键在于结构绑定和选择器联动。HTML 必须让 input 和 label 形成有效关联：
- 要么用
<label for="agree"><input id="agree" type="checkbox">同意</label> - 要么用包裹结构：
<label><input type="checkbox">同意</label>（更简洁，推荐）
CSS 中通过兄弟选择器 + 控制状态切换：
.custom-checkbox input:checked + .checkmark {
background-color: #0A8276;
}
.custom-checkbox input:checked + .checkmark::after {
opacity: 1;
}
注意：::before 或 ::after 必须设 content: '' 才能渲染；若父容器是 inline（如默认 label），IE11 下伪元素宽高可能失效，建议显式设 display: inline-block。
容易被忽略的可访问性细节
很多实现漏掉这几点，导致键盘用户或屏幕阅读器无法正常使用：
- 没给
label加cursor: pointer和user-select: none，用户会误以为不可点 - 没处理
:focus态（比如加outline），键盘 Tab 导航时失去焦点提示 - 伪元素对勾用
border绘制时，粗细在高分屏下可能发虚，建议用 SVG data URI 或mask-image替代 - 移动端点击区域太小，需确保
.checkmark宽高 ≥ 44×44px（iOS 最小触控尺寸）
真正难的不是画个方框，而是让那个方框在任何设备、任何辅助技术下，都和原生 checkbox 行为一致——点它就选，空格键就切，读屏器能报“已选中”，焦点移动时不跳过。这些细节不补全，美化就只是视觉糖衣。
