应使用.form-check-input:checked + .form-check-label::after自定义选中样式，或覆盖.custom-control-input:checked ~ .custom-control-label::before/::after；禁用form-check直接用原生radio需补全id与for绑定并增强移动端交互。
Radio默认样式被Bootstrap 4覆盖后无法直接用:checked改颜色
Bootstrap 4对.form-check-input做了appearance: none和隐藏处理，原生input[type="radio"]本身不可见，所以直接写input[type="radio"]:checked { background: red }完全无效。必须操作它后面紧邻的.form-check-label或自定义伪元素。
用::after在.form-check-input:checked + .form-check-label::after上画选中态
这是最稳妥的方式，不破坏Bootstrap结构，兼容性好（IE10+）。关键点是：伪元素必须挂载在.form-check-label上，并通过兄弟选择器定位到已勾选的input。
实操建议：
- 确保HTML结构严格为：
<input class="form-check-input" type="radio"><label class="form-check-label">选项</label> - 给
.form-check-label::after设position: absolute、content: ""，再用transform: translate()精确定位到圆圈位置 - 选中时用
.form-check-input:checked + .form-check-label::after覆盖样式，比如background-color: #007bff - 别忘了重置
.form-check-input的margin-right，否则自定义圆圈会和文字重叠
如果用custom-control（旧版Bootstrap 4推荐方式），改.custom-control-input:checked ~ .custom-control-label::before
Bootstrap 4官方custom-control体系把状态样式全写在::before和::after里。想换颜色，只需覆盖这两个伪元素：
常见错误现象：只改::before背景色，但没同步改::after（即中间那个实心圆）的颜色，导致“框变蓝、点还是灰”。
正确做法：
-
.custom-control-input:checked ~ .custom-control-label::before控制外框颜色 -
.custom-control-input:checked ~ .custom-control-label::after控制内点颜色 - 两者
border-color和background-color最好统一，避免视觉割裂 - 注意
~是通用兄弟选择器，要求input和label同级且input在前
禁用form-check用原生Radio？小心移动端点击失效
有人干脆去掉form-check-input类，用裸input[type="radio"]加:checked样式。但问题立刻出现：iOS Safari和部分Android浏览器下，点击label无法触发选中——因为Bootstrap移除了for属性绑定，而裸标签又没for或id关联。
若真要这么做，必须手动补全：
<input id="r1" type="radio"><label for="r1">选项</label>- 确保
for值和input的id严格一致 - 移动端需额外加
cursor: pointer和touch-action: manipulation提升响应感
真正麻烦的不是怎么改颜色，而是改完后在不同设备上点不点得中、样式对不对齐、是否意外影响其他表单控件。优先走custom-control覆盖路径，比自己重写一套更省心。
