原生 radio 无法用 width/height 或 font-size 放大图标，因浏览器 UA 样式锁定渲染；可靠方案是 label 包裹 + 伪元素重绘外圈与内点，并用 CSS 变量统一控制尺寸。
原生 <input type="radio"> 无法可靠放大图标——别试 width/height 或 font-size，它们在 Chrome/Firefox 中基本无效。
为什么直接设 width/height 不起作用
浏览器对单选按钮图标的渲染完全由 UA 样式控制，width 和 height 只影响整个 input 元素的盒模型（比如外边距占位），但内部圆点和外圈尺寸不受影响。你看到的“没变大”，不是 CSS 写错了，是浏览器压根不响应。
-
font-size对radio图标无任何作用，哪怕设成40px - 强行加
transform: scale(1.5)会放大热区，导致点击位置和视觉圆点错位 - 某些安卓 WebView 或微信内置浏览器直接忽略
transform，图标原样不动
真正能用的方案：label + 伪元素重绘
放弃操作 input 本身，用 label 包裹并隐藏它，再通过 ::before 和 ::after 绘制可缩放的外圈与内点。
- 给
input加position: absolute; opacity: 0;，保留可访问性但彻底隐藏 - 为
label设position: relative; display: inline-flex; align-items: center; -
label::before：画外圈，content: ""; border: 2px solid #999; border-radius: 50%; width: 1.2rem; height: 1.2rem; -
label::after：画内点，content: ""; background: #007bff; border-radius: 50%; width: 0.6rem; height: 0.6rem; transform: scale(0); - 选中时用
input:checked + label::after { transform: scale(1); }触发内点显示
缩放时必须显式设置 transform-origin
如果只写 transform: scale(1.4)，默认从左上角缩放，圆点会“右下漂移”，看起来像偏了。必须补上：
立即学习“前端免费学习笔记（深入）”；
label::before, label::after {
transform-origin: center;
}
- 不加这句，
scale()在不同浏览器里表现不一致，尤其 Safari 和旧版 Edge - 父容器有
overflow: hidden时，缩放后可能被裁切——得检查 label 是否超出容器边界 - 过渡动画只写
transition: transform 0.15s ease;，别用all，否则 focus outline 也会动
响应式场景下优先用 CSS 变量控制尺寸
小屏需要更大触控区域？别堆媒体查询重写伪元素宽高，改用变量驱动：
:root {
--radio-size: 1.2rem;
}
label::before {
width: var(--radio-size);
height: var(--radio-size);
}
@media (max-width: 480px) {
:root { --radio-size: 1.6rem; }
}
- 变量统一管理尺寸，改一处全链路生效
- 避免因单位混用（如 px + rem）导致缩放比例失准
- JS 动态调整时，直接改
document.documentElement.style.setProperty('--radio-size', '1.8rem')即可
最易被忽略的是：label 的 for 属性和 input 的 id 必须严格匹配，否则点击 label 不触发选中——这不是样式问题，是功能断裂点。
