加了form-check-input却没变化，是因为它仅作定位锚点且被设为opacity:0，不负责重绘；必须用form-check容器包裹，确保input与label同级相邻、for与id严格匹配，并通过伪元素::before/::after自定义样式。
为什么加了 form-check-input 却没变化？
因为 Bootstrap 5 不自动替换原生渲染，只提供结构类。你看到的“没反应”，其实是浏览器还在画默认圆点或方框——form-check-input 本身不负责重绘，它只是个定位锚点。
必须确保 HTML 结构完整：
<div class="form-check"> 是必需容器，不能省 <li> <code><input type="radio" class="form-check-input">和<label class="form-check-label" for="xxx"></label>必须同级、相邻，且for值与id严格一致- 不能把
input包在label里（虽然语义上可行），否则:checked + label::before这类兄弟选择器会失效
怎么用纯 CSS 改单选框圆圈大小和颜色？
别碰 form-check-input 的 border 或 background，它已被设为 opacity: 0 且 position: absolute，改了也看不见。真正起作用的是伪元素。
推荐直接重写 ::before（未选中）和 ::after（选中）：
.form-check-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-check-input + .form-check-label::before {
content: "";
position: absolute;
top: 0.25em;
left: -1.5em;
width: 1.2em;
height: 1.2em;
border: 2px solid #6c757d;
border-radius: 50%;
background-color: transparent;
}
.form-check-input:checked + .form-check-label::before {
background-color: #0d6efd;
border-color: #0d6efd;
}
.form-check-input:checked + .form-check-label::after {
content: "";
position: absolute;
top: 0.45em;
left: -1.1em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background-color: white;
}
注意：尺寸单位用 em 更适配字体缩放；left 值要随 width 调整，否则中心偏移。
input[type="radio"]:checked + label.btn 为什么有时不生效？
这是最常踩的 DOM 结构坑。这个选择器要求：input 和 label.btn 必须是**紧邻的兄弟元素**，中间不能有空格、换行或其它标签。
常见失效场景：
- HTML 中写了换行或缩进，比如
<input>\n<label class="btn"></label>→ 浏览器会把换行解析为文本节点，破坏“相邻”关系 - 用了 Vue/React 等框架，
v-if或条件渲染导致input和label不再同级 -
label上漏了class="btn"，或者写了class="btn btn-primary"但 CSS 里只写了label.btn（没问题），但若写了label.btn-primary就会漏掉其他变体
修复方法：删掉 input 和 label 之间的所有空白，或改用更宽松的选择器 input[type="radio"]:checked ~ label.btn（但需确保 label 在 input 后面）。
深色模式下自定义 radio 怎么避免发灰看不清？
Bootstrap 默认的 rgba(13, 110, 253, 0.25) 聚焦环在深背景上对比度严重不足，不是透明度设低了，而是 alpha 值在深色下视觉权重被吃掉。
两个务实解法：
- 提高 alpha 值：比如改成
rgba(13, 110, 253, 0.4)，或直接用hsla(213, 100%, 52%, 0.4)更可控 - 换掉聚焦方式：不用
box-shadow，改用outline: 2px solid #0d6efd+outline-offset: 2px，它在深色模式下更稳定 - 加一层浅色背景微调：如
background-color: #1a3a6c（比父容器稍亮），让边框和阴影有落脚点
别依赖 @media (prefers-color-scheme: dark) 去覆盖所有样式——很多用户手动切深色模式，系统媒体查询不触发。最好用 CSS 变量统一控制，比如定义 --radio-focus-alpha: 0.4，全局复用。
