要自定义 bootstrap 复选框样式，须通过兄弟选择器控制 label 的伪元素：input:checked + .form-check-label::after 显示选中图标，input:disabled + .form-check-label::before 处理禁用态，input:focus + .form-check-label::before 保障焦点反馈；需写全 -webkit-appearance、-moz-appearance 和 appearance 并配合 opacity: 0、position: absolute 隐藏原生控件；推荐 unicode 图标，暗色模式需单独媒体查询。
直接改 .form-check-input 的 background 或 border 没用——它被 Bootstrap 设为 position: absolute; opacity: 0，只是个“透明触发器”。真正要动的是 label::before 和 label::after。
必须用兄弟选择器控制伪元素状态
所有视觉变化都得从 input 的状态出发，再通过 CSS 相邻/兄弟选择器传递到 label 上的伪元素。浏览器不支持 input:checked::before，写出来也无效。
-
input:checked + .form-check-label::after控制选中图标（比如 ✓） -
input:disabled + .form-check-label::before单独处理禁用时的边框色和背景灰度 - 别漏掉
input:focus + .form-check-label::before，否则键盘导航失去焦点反馈 - 如果用了
form-switch，它的状态切换逻辑不同，不能复用同一套伪元素规则
appearance: none 要写全前缀才保险
仅写 appearance: none 在 Safari 15.4 之前或 Firefox 84 以下可能失效，原生控件会“透出”干扰自定义样式。
- 必须同时声明：
-webkit-appearance: none、-moz-appearance: none、appearance: none - 再补上
opacity: 0+position: absolute强制隐藏 - 旧版 Firefox 还需
clip: rect(0 0 0 0)防止视觉残留 -
pointer-events: none可加可不加，但加了要确认 label 的点击热区没被意外遮挡
图标用 Unicode 还是 inline SVG？
推荐优先用 Unicode 字符（如 "✓"、"●"），轻量、无请求、兼容性好。inline SVG base64 是备选，但要注意 URL 编码和 background-size 对齐。
- 避免用
content: "\f123"直接插 Font Awesome 或 Bootstrap Icons 的 Unicode——字体版本一变就错位或显示方块 - 如果非要用图标库，显式在
label内插入<i class="bi bi-check"></i>，再用 CSS 控制显隐，比伪元素更稳 - SVG 图标若设为
background-image，必须同步调background-position: right 0.75rem center和padding-right: 1.75rem，不然在form-select-sm或form-select-lg下会错位
最易忽略的一点：暗色模式下，::before 和 ::after 不继承父级的 color 或 background-color，也不能直接套用 Tailwind 的 dark: 前缀——得单独写媒体查询或用 color-scheme: dark 配合变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
