Bootstrap 5 的 checkbox/radio 自定义依赖正确结构：input 与 label 必须同属 div.form-check，label 的 for 值须严格匹配 input 的 id，伪元素样式通过 input:checked + label::after 控制，禁用 display: none 以保障可访问性。
bootstrap 5 默认不替换原生 <input type="checkbox"> 和 <input type="radio"> 的视觉渲染，只提供基础布局类（如 form-check）和可访问性结构。直接改 input 的 border 或 background 没用——它被设为 opacity: 0 且 position: absolute 隐藏了，真正显示的是紧邻 label 的伪元素。
为什么加了 form-check-input 却没变化
常见原因不是 class 写错，而是结构或配套缺失：
-
form-check-input必须和form-check-label在同一个div.form-check容器内，缺一不可 -
label必须带for属性，且值严格等于对应input的id，否则点击文字无法触发选中 - 漏写
form-check容器类会导致外边距、对齐、垂直居中全部失效 - 若用了第三方图标库（如 Bootstrap Icons）或自定义 CSS，可能意外重置了
appearance: none或覆盖了伪元素定位
纯 CSS 自定义 checkbox/radio 图标（无 JS）
核心是操作 label 的 ::before 和 ::after，靠兄弟选择器响应状态：
- 给
input设position: absolute; opacity: 0;（不能用display: none，会破坏可访问性） - 给
label设position: relative;，让伪元素能准确定位 - 用
input:checked + label::after控制选中态，不是input:checked::after（input不支持伪元素） - 图标推荐用 Unicode（如
"✓"、"●"）或 inline SVG base64，避免字体加载失败导致空白
示例：圆角复选框勾选图标
.form-check-input {
position: absolute;
opacity: 0;
}
.form-check-label::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #adb5bd;
border-radius: 4px;
margin-right: 8px;
vertical-align: middle;
}
.form-check-input:checked + .form-check-label::after {
content: "✓";
position: absolute;
left: 2px;
top: 2px;
font-size: 12px;
color: #fff;
}
水平排列复选框/单选框总竖着排？
form-check-inline 是唯一有效方式，但极易踩坑：
- 每个选项必须单独包裹在
div.form-check.form-check-inline中，不能多个input塞进一个容器 -
form-check类不可省，否则label对齐错乱、点击区域变小 - 父容器若设了
flex-column或d-flex flex-column，会强制覆盖inline-block行为 - 小屏幕下
form-check-inline默认退化为垂直排列，这是响应式设计，不是 bug - 同组单选框必须共用相同
name值，否则无法互斥
用 Bootstrap Icons 替换原生图标要注意什么
别试图在 ::before 里直接写 content: "\f123"——字体版本不匹配时图标就消失：
- 正确做法是在
label内显式插入<i class="bi bi-check"></i>，再用 CSS 控制显隐 - 例如：
input:not(:checked) + label .bi-check { display: none; } - 确保
bootstrap-iconsCSS 已加载，且未被其他样式（如all: unset）重置 - 禁用
label的默认user-select: none，否则图标可能无法复制（虽然一般不需要）
最常被忽略的点：所有自定义都依赖于 input 和 label 的 DOM 顺序与属性绑定。一旦 for/id 不匹配，或结构嵌套错层，样式再漂亮也点不动。先验证基础结构是否跑通，再动伪元素。
