直接修改 .form-check-input 的 background 无效，因其被设为 position: absolute; opacity: 0，仅作透明触发器；真实图标由 label::before/after 渲染，样式需通过兄弟选择器（如 input:checked + label::after）控制。
为什么直接改 .form-check-input 的 background 没用
因为 bootstrap 5 默认把 .form-check-input 设为 position: absolute; opacity: 0，它只是个“透明触发器”，真正显示的图标是通过 label::before 和 label::after 画出来的。你改 input 自身的 border、background 或 color，等于在隐身人身上涂口红——看不见。
常见错误现象：
- 写了
background-color: #0d6efd却毫无反应 - 加了
border-radius但圆角不生效 - 禁用态下 label 文字变灰，但伪元素图标还亮着
必须做的三件事：
- 确保
input是position: absolute; opacity: 0;（不能用display: none，否则破坏可访问性） -
label要设position: relative，否则伪元素定位漂移 - 所有视觉状态都靠兄弟选择器控制：
input:checked + .form-check-label::after，不是input:checked::after
怎样让 appearance: none 真正生效
不是属性写错，而是浏览器前缀缺失或结构不匹配。Safari 15.4 之前对 radio 的 appearance: none 支持不全，Firefox 84 及以下即使加了前缀，原生控件仍可能“透出”。
必须同时写齐三套：
-
-webkit-appearance: none（Safari / Chrome 必备） -
-moz-appearance: none（Firefox 必备） -
appearance: none（现代标准）
但光靠 appearance: none 不够保险，还得补：
-
opacity: 0+position: absolute强制隐藏 -
clip: rect(0 0 0 0)防止旧版 Firefox 透出 -
pointer-events: none避免遮挡 label 点击热区
如何响应 :checked 和 :disabled 状态
伪元素本身不继承父元素状态，:checked 和 :disabled 必须从 input 上出发，再通过兄弟/相邻选择器传递到 label 的伪元素上。
关键写法示例：
.form-check-input:checked + .form-check-label::before {
background-color: #0d6efd;
}
.form-check-input:disabled + .form-check-label {
opacity: 0.6;
}
.form-check-input:disabled + .form-check-label::before {
background-color: #e9ecef;
border-color: #dee2e6;
}
注意点：
- 别漏掉
:disabled对伪元素的单独处理，否则视觉割裂 - 暗色模式下不能依赖 Tailwind 的
dark:bg-gray-700直接写在伪元素里——::before不支持dark:前缀 - 要用
@media (prefers-color-scheme: dark)手动重设，或统一用 CSS 变量管理颜色
横排显示总失败？检查这三个地方
Bootstrap 5 中唯一合法的横排方式是每个选项单独套一层 form-check form-check-inline，不是把多个 input 塞进一个容器里。
最常被忽略的细节：
- 父容器宽度不足（比如
col-12里塞太多选项，自动换行） - 父级用了
d-flex flex-column或flex-wrap: wrap，直接覆盖 inline 行为 - 漏写了基础类
form-check，只写了form-check-inline—— 后者只是增强，不是替代
正确结构必须是：
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="check1" value="1"> <label class="form-check-label" for="check1">选项1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="check2" value="2"> <label class="form-check-label" for="check2">选项2</label> </div>
单选框同理，只需改 type="radio" 并保证同组 name 一致。别图省事合并容器——语义错误、焦点异常、屏幕阅读器读错，上线后会被无障碍审计打回来。
