真正可控的单选按钮缩放方案是用label包裹隐藏原生input，通过label::before绘制外圈、label::after绘制内点，并用transform: scale()配合transform-origin: center缩放伪元素；直接对input使用scale会导致热区错位、渲染兼容性差等问题。
单选按钮 <input type="radio"> 本身不能直接缩放图标
浏览器对原生 <input type="radio"> 的渲染高度、圆点直径等完全由 UA 样式控制，font-size、width/height 对其内部圆点图标基本无效（尤其 Chrome/Firefox），强行设 transform: scale() 会放大整个 input 元素（含不可见的点击热区），但视觉上可能偏移、边缘模糊，且无法单独控制圆点与外圈比例。
真正可控的放大方式：用 label + 自定义伪元素
必须放弃直接操作 input，改用包裹 label 隐藏原生控件，再用 ::before/::after 绘制可缩放的圆点。这是目前最稳定、可访问、可缩放的方案：
- 给
input加position: absolute; opacity: 0;彻底隐藏但保留可访问性 - 为
label设置position: relative;，并定义宽高和display: inline-flex对齐 - 在
label::before中绘制外圈：content: "";+border: 2px solid #999;+border-radius: 50%; - 在
label::after中绘制内点：content: "";+background: #007bff;+border-radius: 50%; - 用
transform: scale(1.4)同时放大两个伪元素，并通过transform-origin: center保证居中 - 配合
transition: transform 0.15s ease实现悬停/选中时平滑缩放
transform: scale() 在 radio 上容易踩的坑
即使你坚持对原生 input 套 transform，也得注意这些硬伤：
-
transform: scale(1.5)后，点击热区也放大 1.5 倍——但视觉圆点没变大，用户感知错位 - 缩放默认从左上角出发（
transform-origin: 0 0），圆点会“右下漂移”，必须显式写transform-origin: center - 某些安卓 WebView 或微信内置浏览器会忽略
input[type="radio"]的transform，渲染完全不变 - 如果父容器有
overflow: hidden，放大后圆点被裁切，而你根本看不到被裁的是哪部分 -
transition: all 0.2s会导致 focus outline 也动画，干扰视觉焦点，应只写transition: transform 0.2s ease
响应式场景下更推荐 CSS 变量 + rem 控制尺寸
当需要根据屏幕尺寸动态调整单选按钮大小（比如小屏要更大触控区域），别用媒体查询反复重写伪元素尺寸，而是用 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; } - 伪元素的
transform: scale()改为基于变量计算：transform: scale(calc(var(--radio-scale, 1) * 1.3)); - 这样缩放比例和基础尺寸解耦，维护成本低，且能和字体系统联动（比如用户设置系统字号放大，你的 radio 也会同步变大）
真正难的不是让圆点变大，而是让它变大之后依然精准对齐、点击无偏差、适配各种屏幕和辅助技术——这些细节不处理，光靠 scale(1.5) 只会让问题更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
