单选按钮本身不可调字体大小，真正需设置的是关联的label元素；因input[type="radio"]是替换元素，font-size对其无效，文字由label渲染，故必须通过label的font-size、padding、display及line-height等属性协同控制样式与可访问性。
单选按钮本身没有字体大小可调——input[type="radio"]是替换元素，不渲染文本，font-size加在它身上完全无效。真正要改的，是和它配对的label元素。
为什么直接给 input 设 font-size 没用
浏览器把单选按钮当成一个“黑盒图标”，它的显示由 UA 样式控制，font-size、width、height甚至transform: scale()都只影响外层盒子或热区，不会改变按钮旁的文字大小，更不会放大圆点本身。
- 常见错误：写
input[type="radio"] { font-size: 18px; }，结果文字纹丝不动 - 真正显示文字的是
label——无论它是包裹input，还是通过for属性关联 - 如果 DOM 是
<input id="opt1"><label for="opt1">选项一</label>，就必须选label[for="opt1"]，不是input
label 的字体设置要点
给label设font-size是唯一可靠方式，但要注意几个实操细节：
- 单位不能省：
label { font-size: 14px; }✅，font-size: 14;❌ - 移动端点击区域小？光调字号不够，必须加
padding: 12px 0;扩大热区（iOS/Android 推荐 ≥44×44px） -
label默认是inline元素，padding只在左右生效；要上下 padding 生效，得加display: inline-block;或display: flex; - 禁用状态（
disabled）下，文字颜色会被浏览器自动压暗，但font-size依然有效；如需统一禁用态样式，建议用 JS 给label加is-disabled类，再写label.is-disabled { color: #999; }
响应式场景下怎么动态调字号
别用一堆媒体查询重写每个label的font-size，推荐用 CSS 变量驱动：
立即学习“前端免费学习笔记（深入）”；
code:root {
--radio-label-size: 14px;
}
label.radio-option {
font-size: var(--radio-label-size);
padding: 12px 0;
display: inline-block;
}
@media (max-width: 480px) {
:root {
--radio-label-size: 16px;
}
}
- 变量名清晰（如
--radio-label-size），避免和全局--font-size冲突 - 配合
padding一起缩放，否则小屏下文字变大但点击区没跟上 - 如果项目已用
rem做基准，可直接写font-size: 0.875rem;（对应14px），更利于无障碍缩放
最易被忽略的一点：很多人调完label字号就以为完了，却没检查line-height是否匹配——文字变大后若行高没同步调整，多行选项会挤在一起或留白过大。建议始终显式写line-height: 1.4;这类无单位值，让它随font-size自然缩放。
