复选框默认样式无法用color或background修改，因其由浏览器私有渲染逻辑控制；需隐藏原生控件并用伪元素模拟，同时确保无障碍支持。
复选框默认样式无法直接用color或background修改
浏览器对 <input type="checkbox"> 的原生控件做了强封装，color、background、border 等常规属性对它完全无效。这不是你写错了，是规范如此——它本质上是个“不可见的触发器”，视觉层由 UA（用户代理）私有渲染逻辑控制。
所以必须绕过原生控件，用 :checked + :before/:after 或 sibling 选择器配合隐藏原生框，再用其他元素模拟。
最稳妥的做法：用label包裹input + 隐藏原生框 + 伪元素画勾选状态
这是目前兼容性最好、语义正确、无障碍支持较完善的方案：
- 确保
<input>和<label>绑定（用for或嵌套） - 给
<input>加position: absolute; opacity: 0; pointer-events: none;彻底隐藏但保留可访问性 - 给
<label>设置相对定位，再用::before画一个自定义方框 - 用
input:checked + label::before或input:checked ~ label::before控制选中态样式
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 8px;
border: 2px solid #999;
vertical-align: middle;
}
input[type="checkbox"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
color: white;
font-size: 14px;
position: absolute;
top: 2px;
left: 5px;
}
用appearance: none在现代浏览器里“松动”原生样式
appearance: none 能剥离部分 UA 样式，让部分属性开始生效，但它不是万能钥匙：
- Chrome/Firefox/Edge 100+ 支持，但 Safari 直到 15.4 才真正稳定支持
appearance: none对 checkbox 的影响 - 即使设了
appearance: none，background在某些版本 Safari 中仍被忽略，必须配合-webkit-appearance: none - 仅靠它无法实现“带颜色的勾”，还得叠加
::mark或::checked伪元素（但::checked并非标准伪元素，不能用）
所以它更适合做“微调”，比如改边框圆角、加阴影，而不是从零重绘：
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
}
input[type="checkbox"]:checked {
background-color: #28a745;
border-color: #28a745;
}
无障碍和焦点管理容易被跳过
自定义样式后，很多人忘了键盘操作和屏幕阅读器体验：
- 隐藏原生
input时，别用display: none或visibility: hidden，否则会彻底移出可访问树 - 必须保留
tabindex或确保label可聚焦（比如加tabindex="0"），否则键盘用户无法用空格切换 - 如果用了伪元素画勾，建议加上
aria-checked同步状态（尤其在 JS 动态控制时） - 选中色对比度要达标（至少 4.5:1），比如浅灰背景上用太浅的蓝色，色弱用户可能根本看不出是否选中
真正麻烦的从来不是怎么画个蓝框，而是让那个蓝框在键盘、读屏器、高对比度模式、缩放 200% 时都还可靠。这点一旦漏掉，修复成本远高于一开始多写两行 CSS。
