因为bootstrap 5+隐藏原生radio并用伪元素模拟样式，改input本身无效；真正生效的是.form-check-input:checked::after背景色及--bs-form-control-focus-border-color变量。
为什么直接改 input[type="radio"] 的 color 或 background 没用？
因为 Bootstrap 5+ 默认完全隐藏原生 <input type="radio">，用伪元素（::before/::after）和 .form-check-input 的背景色模拟视觉效果。你改原生 input 的样式，等于在改一个 display: none 的元素——根本不会生效。
真正起作用的是 .form-check-input:checked 后面的伪元素，以及 Bootstrap 内置的 --bs-form-control-focus-border-color 和 --bs-form-control-active-bg CSS 变量。
- 默认选中圆点是通过
.form-check-input:checked::after的background-color实现 - 焦点/激活态外圈颜色由
--bs-form-control-focus-border-color控制（影响 focus 和 checked 状态的边框高亮） - Bootstrap 会自动把
data-bs-theme="dark"下的变量值切换为暗色系，所以主题切换时颜色也会变
覆盖选中圆点颜色：重写 ::after 的 background-color
最稳妥的方式是用更高优先级选择器覆盖 .form-check-input:checked::after 的背景色：
.form-check-input:checked::after {
background-color: #0d6efd; /* 替换为你想要的主色 */
}
注意：::after 默认尺寸很小（Bootstrap 5.3 是 8px × 8px），且依赖父容器的 border 和 background-color 做视觉衬托。如果设成纯白或透明，可能看不见。
- 确保你的 CSS 在 Bootstrap 样式之后加载（否则会被覆盖）
- 不要只改
background-color，顺带检查border-color是否与新背景协调（比如深色背景上浅色圆点需加深边框） - 若用 SCSS，可直接在自定义变量里改
$form-check-input-checked-bg，但需确认版本支持（5.2+ 支持）
同时改焦点边框和选中状态外圈：调整 CSS 变量
Bootstrap 使用同一变量控制 focus 和 checked 的外圈高亮色，即 --bs-form-control-focus-border-color。它不仅影响输入框获得焦点时的边框，也影响 radio 选中时那个浅蓝色环（默认是 #0d6efd40）。
全局修改（推荐用于主题一致性）：
:root {
--bs-form-control-focus-border-color: rgba(255, 99, 71, 0.25); /* 番茄红半透边框 */
}
局部修改（仅对某组 radio）：
.my-radio-group .form-check-input:focus,
.my-radio-group .form-check-input:checked {
--bs-form-control-focus-border-color: #dc3545;
}
- 这个变量值必须是带 alpha 的 rgba 或 hsla，否则透明度不对（Bootstrap 内部用它叠加在 border 上）
- 别用
!important强刷border-color—— 会破坏 focus/checked 的统一行为 - 如果用了
data-bs-theme="dark"，记得也在[data-bs-theme="dark"]下重设该变量
兼容旧版 Bootstrap 4 的写法要注意什么？
Bootstrap 4 没有 CSS 变量机制，伪元素结构也不同：.custom-control-input:checked ~ .custom-control-label::before 才是控制选中圆点的关键。
要兼容 v4，得单独写：
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #007bff;
background-color: #007bff;
}
- v4 的
::before是外圈，::after是内点；v5 合并为单层::after - v4 不支持 CSS 变量，所有颜色都得硬写，维护成本高
- 如果项目混用 v4/v5 组件，建议统一升级，或用 class 前缀隔离样式（如
.bs4-radio/.bs5-radio）
实际改的时候，先打开浏览器开发者工具，定位到 .form-check-input:checked::after，看它当前的 computed styles，再决定是覆盖伪元素、调变量，还是补 border 协调。变量方式最干净，但容易漏掉暗色主题下的二次适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
