bootstrap 5 中修改复选框/单选框样式需通过伪元素而非直接改 input；必须保留 input 的绝对定位与透明度以保障可访问性，所有视觉效果由 .form-check-label::before 和 ::after 实现，并确保选择器权重足够覆盖 bootstrap 默认样式。
直接改 .form-check-input 的 background 或 width 没用
因为 Bootstrap 5 把 input[type="checkbox"] 和 input[type="radio"] 设为 position: absolute; opacity: 0，它只是个“透明触发器”。你看到的勾、圆圈、点，全靠 .form-check-label::before 和 ::after 画出来。改 input 自身样式，等于给隐身人换衣服——完全没效果。
常见错误现象包括：
- 写了
background-color: #0d6efd却毫无反应 - 加了
border-radius，但外圈还是直角 - 禁用状态下文字变灰，但勾图标还亮着
必须做的三件事：
-
input保持position: absolute; opacity: 0（不能用display: none，否则破坏可访问性） -
.form-check-label设position: relative，否则伪元素定位漂移 - 所有视觉状态都通过兄弟选择器控制：
input:checked + .form-check-label::after，不是input:checked::after
用 appearance: none 隐藏原生控件要写全前缀
光写 appearance: none 不保险。Safari 15.4 之前对 radio 支持不全，Firefox 84 及以下即使加了前缀，原生控件仍可能“透出”。
必须同时写齐三套：
-
-webkit-appearance: none（Safari / Chrome 必备） -
-moz-appearance: none（Firefox 必备） -
appearance: none（现代标准）
再补上防御性样式：
-
opacity: 0+position: absolute强制隐藏 -
clip: rect(0 0 0 0)防止旧版 Firefox 透出 -
pointer-events: none避免遮挡 label 点击热区
重绘图标得靠 ::before 和 ::after 同步控制
未选中状态用 ::before 画外框（复选框方框 / 单选框圆圈），选中状态用 ::after 画内容（✔️ / ●）。二者尺寸、偏移、颜色必须匹配，否则会错位、浮高或被裁剪。
关键参数建议：
-
.form-check-label::before：设width: 18px; height: 18px; border: 2px solid #adb5bd; top: -0.125rem; left: -0.125rem -
input:checked + .form-check-label::after：用content: "✓"（复选框）或content: "●"（单选框），font-size: 12px; color: #fff; top: 2px; left: 2px - 别漏掉
.form-check-label的vertical-align: middle和margin-right: 0.5rem，否则文字和图标上下错位
暗色模式下，别直接在伪元素里写 dark:bg-gray-700——Tailwind 类不作用于伪元素，得用媒体查询或 CSS 变量配合 :root[data-bs-theme="dark"]。
引入顺序和权重问题比想象中更关键
自定义 CSS 文件必须放在 bootstrap.min.css 之后，但仅靠加载顺序远远不够。Bootstrap 大量使用高权重选择器（如 .form-check-input:checked + .form-check-label::after），你写个 .my-checkbox::after 根本压不过它。
真正能生效的做法：
- 复制 DevTools 中实际生效的 Bootstrap 选择器，再在其基础上叠加你的 class，比如：
input.my-custom-checkbox:checked + .form-check-label::after - 用属性选择器增强特异性：
input[type="checkbox"].form-check-input:checked + .form-check-label::after - 避免
!important，它会让后续维护崩溃；优先用组合选择器提权
最容易被忽略的是：改完伪元素后，.form-check-label 的 line-height 和 font-size 若没同步微调，小屏下文字会和图标挤在一起，或者垂直居中失效——这不是 bug，是基线对齐逻辑没跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
