直接修改.form-check-input无效，因浏览器限制原生单选框样式；需隐藏input（position:absolute;opacity:0;pointer-events:none），用label::before/::after伪元素自定义外观，并确保input与label通过id/for正确关联。
为什么直接改 .form-check-input 无效
Bootstrap 的单选框（<input type="radio">）默认用原生控件渲染，浏览器对它的样式控制极弱。直接给 .form-check-input 加 background-color 或 border-radius 基本没反应——因为这些属性被浏览器忽略。真正能自定义的路径只有一条：隐藏原生 input，用其后的 label 和伪元素（::before/::after）模拟视觉状态。
隐藏原生 input 并绑定 label 的关键写法
必须确保 input 和 label 正确关联，否则点击无响应。Bootstrap 默认结构已满足此要求，但自定义时容易漏掉两个细节：
-
input必须有id，且label的for属性值与之完全匹配（大小写敏感） - 隐藏
input不能用display: none或visibility: hidden，否则键盘焦点和屏幕阅读器会丢失——应改用position: absolute; opacity: 0; pointer-events: none; - 对应的
label需加position: relative，为后续伪元素定位打基础
示例结构：
<div class="form-check"> <input class="form-check-input" type="radio" name="size" id="size-lg" value="lg"><label class="form-check-label" for="size-lg">Large</label> </div>
用 ::before 绘制自定义圆圈，::after 绘制选中点
核心是利用 label::before 画外圈，label::after 在选中时显示内点。注意伪元素的触发依赖于相邻兄弟选择器：.form-check-input:checked + .form-check-label::after。
-
::before设置宽高、边框、圆角（border-radius: 50%），用content: ""触发渲染 -
::after同样设为圆形，初始opacity: 0；选中时通过opacity: 1显现，或配合transform: scale(1)做动画 - 务必设置
label::before, label::after的position: absolute，并用top/left对齐到单选框原始位置（通常top: 0.25em; left: -1.5em;） - 别忘了给
label加padding-left: 1.75em，避免文字覆盖伪元素
关键 CSS 片段：
.form-check-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-check-label {
position: relative;
padding-left: 1.75em;
}
.form-check-label::before {
content: "";
position: absolute;
top: 0.25em;
left: -1.5em;
width: 1em;
height: 1em;
border: 2px solid #6c757d;
border-radius: 50%;
}
.form-check-input:checked + .form-check-label::after {
content: "";
position: absolute;
top: 0.45em;
left: -1.3em;
width: 0.6em;
height: 0.6em;
background-color: #0d6efd;
border-radius: 50%;
opacity: 1;
}
处理禁用态、焦点态和 Safari 兼容性
原生 :disabled 和 :focus 不会作用在伪元素上，需手动映射：
- 禁用态用
.form-check-input:disabled + .form-check-label::before调暗边框色，并加cursor: not-allowed到label - 焦点态（如键盘 Tab 进入）需用
.form-check-input:focus + .form-check-label::before添加box-shadow，但注意 Safari 对input:focus的伪类支持较弱，建议同时加.form-check-input:focus-visible + .form-check-label::before - 某些旧版 Safari 会忽略
input:checked + label::after，可补一层input:checked ~ label::after（用通用兄弟选择器兜底） - 如果项目用了 Bootstrap 5.3+，注意
.form-check-input默认有appearance: none，这反而有助于自定义；但低版本需手动加
容易被忽略的是：当用户用键盘操作时，仅靠视觉反馈不够，必须保留原生 focus outline 的可访问性逻辑——不要用 outline: none 粗暴清除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
