最稳定方案是隐藏原生控件并用伪元素在关联label上绘制样式。因浏览器严格限制checkbox/radio样式，需用position: absolute + clip: rect()隐藏input，保持for/id关联，用input:checked + label::before/after实现可访问的自定义外观。
直接用 CSS 隐藏原生控件、借助 label 关联和伪元素绘制新样式，是目前最稳定、无障碍支持最好、无需 JS 的方案。关键不是“能不能换”，而是“怎么换不破坏语义和可访问性”。
为什么不能直接改 input[type="checkbox"] 的样式？
浏览器对 input[type="checkbox"] 和 input[type="radio"] 的原生渲染控制极强，border、background、width 等多数样式属性在主流浏览器中被忽略或部分生效。强行加样式容易出现跨浏览器不一致，比如 Chrome 可能部分响应 accent-color，但 Safari 15.4 之前完全不支持，Firefox 则长期只支持有限属性。
所以可靠做法是：让原生控件「存在但不可见」，再用 ::before/::after 在关联的 label 上画出想要的视觉效果。
-
position: absolute+clip: rect(0, 0, 0, 0)或opacity: 0是隐藏原生控件的常用组合（display: none会切断表单提交和屏幕阅读器识别） - 必须保持
input和label的显式关联（for+id，或包裹结构），否则点击 label 不会触发选中，也影响无障碍 -
clip: rect()比visibility: hidden更安全——后者仍占布局空间，且某些读屏器可能误判为“隐藏但可交互”
input:checked + label::before 这个选择器怎么写才稳？
这个组合是核心驱动逻辑，但写法稍有偏差就失效。它依赖两个前提：一是 input 和 label 必须是相邻兄弟（+ 表示紧邻），二是 input 必须在 label 前面（HTML 中顺序不能颠倒）。
推荐 HTML 结构：
<input type="checkbox" id="agree" name="agree"><label for="agree">我已阅读并同意条款</label>
对应 CSS：
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
input[type="checkbox"] + label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 4px;
background-color: #fff;
}
input[type="checkbox"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
input[type="checkbox"]:checked + label::after {
content: "✓";
position: absolute;
top: 0;
left: 3px;
font-size: 12px;
color: white;
}
- 别用
input[type="checkbox"] ~ label（泛兄弟选择器），它不保证紧邻，易被中间插入的文本或注释打断 -
::after里用 Unicode 字符（如\2713）比用背景图更轻量，但要注意字体是否支持；若需兼容老系统，可改用background-image+ sprite - 所有尺寸单位建议用
px或em，避免用rem导致在缩放页面时错位
单选框圆点动画和复选框对勾怎么平滑过渡？
纯 CSS 动画可行，但要注意触发时机和性能。不要对 transform 或 opacity 以外的属性做过渡（比如直接 transition: background-color .2s 在某些安卓 WebView 中会卡顿）。
- 对勾显示推荐用
scale+opacity组合：未选中时transform: scale(0)+opacity: 0，选中时设为scale(1)+opacity: 1 - 单选框内圆点可用
transform: scale()模拟「填充」效果，配合transition: transform .15s ease-in比单纯颜色变化更直观 - 避免给
::before和::after同时加transition，容易造成重绘抖动；优先只过渡一个伪元素 - 如果项目需支持 Safari 14.1 以下版本，
inset不可用，得退回top/right/bottom/left四值写法
最容易被忽略的是焦点管理：键盘用户按 Tab 切入时，原生 input 仍有 :focus 状态，但你画的自定义框没高亮。必须手动给 input:focus + label::before 加 outline 或阴影——否则 WCAG 2.4.7（焦点可见性）不达标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
