直接覆盖 .form-check-input 无效，因其被 opacity: 0 隐藏，样式须作用于 .form-check-label::before（外框）和 ::after（对勾/圆点），并保留其 position: absolute 与可访问性。
为什么直接覆盖 Bootstrap 4 的 .form-check-input 不起作用
因为 Bootstrap 4 默认用 opacity: 0 隐藏原生 <input type="checkbox">，再用伪元素（::before/::after）在紧邻的 <label></label> 上绘制自定义样式。你如果只改 .form-check-input 的外观，浏览器会忽略——它根本不可见。真正要动的是 .form-check-input + .form-check-label::before 这类组合选择器。
常见错误现象：input[type="checkbox"] { appearance: none; } 在部分旧版 Chrome/Firefox 下无效；或修改了伪元素但没重置 position 和 top/left，导致图标错位。
- 必须保留
.form-check-input的position: absolute和opacity: 0，否则语义和可访问性崩溃 - 所有视觉样式必须施加在
.form-check-label::before（外框）和.form-check-label::after（勾选标记）上 - Bootstrap 4 的
.form-check容器默认是display: block，别意外改成flex后 label 文字换行
如何用纯 CSS 绘制圆角方框 + 内嵌对勾
核心是控制两个伪元素的尺寸、边框、背景和 transform。不需要任何图片或 SVG，CSS 就够用。
示例关键片段：
.form-check-input:checked + .form-check-label::after {
content: "";
position: absolute;
left: 6px;
top: 6px;
width: 8px;
height: 14px;
border: 2px solid white;
border-top: 0;
border-left: 0;
transform: rotate(45deg);
}
.form-check-input + .form-check-label::before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 18px;
height: 18px;
border: 2px solid #6c757d;
border-radius: 4px;
background-color: white;
}
-
border-radius: 4px控制圆角程度，设为50%就是圆形单选框 - 对勾用
transform: rotate(45deg)+ 分段边框实现，比clip-path兼容性更好（支持 IE11+） - 务必设置
top: 0.25em对齐文字基线，否则 checkbox 垂直偏高
Radio 和 Checkbox 的样式分支怎么写才不冲突
Bootstrap 4 同时用 .form-check-input[type="radio"] 和 [type="checkbox"]，所以必须分开写伪元素规则，不能共用一套 ::before。
容易踩的坑：写了 input[type="checkbox"] + label::before，结果 radio 也被套上方框；或者忘了给 radio 的 ::after 改成实心圆点。
- radio 的未选中态用
border-radius: 50%+background: transparent - radio 的选中态用
.form-check-input[type="radio"]:checked + .form-check-label::after，画一个居中的小圆width: 8px; height: 8px; border-radius: 50%; background: #007bff; - 务必加
pointer-events: none到所有伪元素上，否则点击区域变小
无障碍和焦点状态不能丢
纯 CSS 重写最容易砍掉 :focus 和 :checked:focus 样式，但这会让键盘用户找不到当前焦点在哪，也违反 WCAG 2.1。
Bootstrap 4 默认用 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)，你可以简化，但不能删。
- 给
.form-check-input:focus + .form-check-label::before加box-shadow或outline - 确保
outline不被outline: none全局覆盖（检查是否误写了*:focus { outline: none }） - 用
prefers-reduced-motion媒体查询禁用动画，避免触发某些用户的不适
最常被忽略的是 aria-checked 状态不会自动同步——只要你不替换原生 input，它就依然工作。别手痒用 div + JS 重做，那才是真进坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
