原生 radio 图标无法通过 width/height/font-size 放大，因 UA 样式不响应；可靠方案是 label 包裹隐藏 input，用 ::before/::after 伪元素重绘外圈与内点，并设 transform-origin 和足够 padding 保障可点击性。
原生 <input type="radio"> 的圆圈图标无法通过 width、height 或 font-size 可靠放大——这不是你 CSS 写错了，是浏览器 UA 样式根本不响应这些属性。
为什么直接设 width/height 对 radio 图标无效
浏览器对单选按钮内部圆点和外圈的渲染完全由用户代理（UA）样式控制。width 和 height 只影响 input 元素的盒模型占位（比如外边距区域），但不会改变视觉上的圆圈尺寸。你在 Chrome 或 Firefox 里调大它们，看到的“没变化”是正常行为，不是 bug。
font-size 对 radio 图标也完全无效，哪怕设成 40px 也没用。
强行加 transform: scale(1.5) 会放大整个 input 元素（含不可见点击热区），但视觉圆点可能偏移、边缘模糊，且在安卓 WebView 或微信内置浏览器中常被忽略。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真正能用的方案：label + 伪元素重绘
放弃操作 input 本身，用 label 包裹并隐藏它，再通过 ::before 和 ::after 绘制可缩放的外圈与内点：
- 给
input加position: absolute; opacity: 0; width: 1px; height: 1px;—— 隐藏但保留可访问性和键盘焦点 - 为
label设position: relative; display: inline-flex; align-items: center; -
label::before：画外圈，content: "";+border: 2px solid #999;+border-radius: 50%;+ 尺寸如width: 1.4rem; height: 1.4rem; -
label::after：画内点，content: "";+background: #007bff;+border-radius: 50%;+ 尺寸如width: 0.7rem; height: 0.7rem; - 选中时用
input:checked + label::after { transform: scale(1); }触发内点显示 - 必须加
transform-origin: center;到两个伪元素上，否则scale()会从左上角出发，导致圆点“漂移”
移动端点击区域小？别只调圆圈大小
单纯放大圆圈不等于增大可点击范围。iOS 和 Android 要求触摸目标 ≥44×44px，而默认 radio 点击区极小。
- 给
label加padding: 12px 16px;，既撑开热区，又保持文字垂直居中 - 确保
label是inline或inline-block（默认是inline，需显式设display: inline-block;才让padding生效） - 避免用
height硬撑，容易和line-height冲突导致错位 - 务必加
cursor: pointer;，否则悬停无反馈
容易被忽略的关键细节
很多人做完伪元素重绘后发现 Safari 或旧 Edge 里圆点位置不对，或者 hover 缩放卡顿——问题往往出在 transform-origin 漏写，或 transition 写成了 all。
还有人把 input 设成 display: none 或 visibility: hidden，这会让屏幕阅读器读不到、键盘 Tab 失效。安全隐藏只能靠 position: absolute; opacity: 0; 配合足够尺寸的 label。
最后提醒一句：如果用 appearance: none，Firefox 必须额外加 -moz-appearance: none，否则原生圆点还在。
