直接改input[type="radio"]的width/height无效，因其被Bootstrap设为opacity:0+position:absolute脱离文档流；实际圆圈由.form-check-label::before和::after绘制，需同步调整二者尺寸、偏移及vertical-align等属性确保对齐与热区准确。
直接改input[type="radio"]的width/height为什么没用
因为 Bootstrap 5 把原生单选框设为 opacity: 0 + position: absolute，它根本不在视觉流里。你看到的圆圈是 .form-check-label::before（外圈）和 .form-check-label::after（选中点）画出来的，不是 input 本身。浏览器对原生表单控件有强 UA 样式约束，width/height 被忽略；用 transform: scale() 会模糊、错位热区，且不响应点击区域变化。
真正要改的两个伪元素：尺寸 + 偏移必须同步
必须同时控制未选中状态的外圈和选中状态的实心点，并微调 top/left 补偿边框或缩放带来的基线偏移，否则圆圈会浮高、下沉或被裁剪：
-
input[type="radio"].form-check-input::before：设width和height控制外圈直径（如16px），若有border: 2px，需配top: -0.125rem和left: -0.125rem抵消边框溢出 -
input[type="radio"].form-check-input:checked + .form-check-label::after：用content: "●"或background-color绘制实心点，width/height应为外圈的 40%～50%（如外圈16px，则点设8px） - 别漏掉
.form-check-label::before的vertical-align: middle和margin-right，否则文字会和圆圈上下错位
常见踩坑点：热区失效、图标模糊、响应式断裂
改完发现点不中？或者小屏下圆圈变小、文字挤在一起？问题往往不在尺寸本身，而在关联逻辑没跟上：
- 热区仍按原始
input尺寸响应——确保.form-check-label是position: relative，且伪元素没加pointer-events: none - 用
transform: scale(1.2)替代尺寸调整？会导致渲染层缩放，图标边缘发虚，且::after的top/left偏移值需同比例放大，极易失准 - 响应式断点里（如
@media (max-width: 768px)）没重写伪元素尺寸？默认只有一套样式，小屏下可能过小或撑破行高 - 用了自定义字体图标？得确认
content字符能 fallback，否则空白；推荐用 Unicode"●"或 inline SVG base64 更稳
别忘了同步调整文字与圆圈的视觉对齐
最易被忽略的是：.form-check-label 的 line-height 和 font-size 若未随尺寸微调，会导致文字与圆圈在垂直方向“看起来”没对齐——这不是像素偏移，而是视觉基线错觉，得靠 vertical-align 和微调 margin-top 或 padding 来修正。改完尺寸后，务必在真机和不同字号下肉眼验证对齐效果。
立即学习“前端免费学习笔记（深入）”；
