radio 默认尺寸无法用 width/height 直接修改，需用 appearance: none 剥离原生样式并配合伪元素重绘；label 必须合理包裹或关联 input 以扩大点击区域；IE11 不支持 appearance，需图片替换或 JS 方案。
radio 默认尺寸无法用 width/height 直接修改
浏览器对 <input type="radio"> 的原生渲染做了强约束，直接写 width: 20px; height: 20px; 在绝大多数浏览器（Chrome、Firefox、Safari）中完全无效。这不是 bug，而是规范行为——表单控件的外观由 UA stylesheet 控制，且 radio 的尺寸属性被显式设为不可继承、不可覆盖。
用 appearance: none + 自定义伪元素重绘
主流方案是先剥离原生样式，再用 ::before 或 ::after 绘制自定义圆点。关键点在于：
- 必须加
appearance: none;（带-webkit-和-moz-前缀更稳妥） -
position: relative;是后续伪元素定位的前提 - 伪元素需设
content: "";，否则不渲染 - 圆点建议用
border-radius: 50%;+background，而非box-shadow模拟，后者在高缩放下易糊
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
position: relative;
margin: 0;
vertical-align: middle;
}
input[type="radio"]::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
}
input[type="radio"]:checked::before {
background: #007bff;
border-color: #007bff;
}
label 包裹时点击区域要同步扩大
只改 input 大小没用——用户实际点击的是 label 文本或其空白区域。若没处理，视觉变大了但可点击范围还是原来那么小。
- 确保
label使用for属性关联id，或直接包裹input - 给
label加display: inline-flex;或display: flex;，再用align-items: center;垂直居中 - 必要时给
label设padding-left: 28px;（留出 radio + 间距），避免文字紧贴控件
IE11 及更老浏览器的兼容 fallback
appearance 在 IE 全系都不支持，如果必须兼容 IE11，只能放弃纯 CSS 方案：
立即学习“前端免费学习笔记（深入）”；
- 用图片替换：设置
background-image为 sprite 图，通过background-position切换状态 - 或引入轻量 JS 库如
iCheck，它会自动包裹 DOM 并绑定事件，但会增加额外依赖 - 注意：IE 中
input[type="radio"]的vertical-align行内对齐异常，常需配合line-height或margin-top微调
现代项目基本可忽略 IE，但若遇到遗留系统，这点容易漏测——radio 看似“变大了”，实则只是 label padding 撑开的假象，真实控件仍不可点。
