单选按钮本身不能设字号，因它是无文本的替换元素；必须给关联的label设置font-size才生效，同时建议加padding扩大移动端点击区域。
单选按钮（input[type="radio"]）本身不能设字号
你没法直接对 <input type="radio"> 元素写 font-size——它是个替换元素，没有文本内容，浏览器也不渲染它的 value 或 label 文本。真正显示文字的是紧挨着它的 <label></label>，或者用 for 属性关联的 <label></label>。
必须给 label 设 font-size 才生效
常见错误是只改 input 样式，结果文字大小纹丝不动。正确做法是定位到对应的 label 元素：
- 如果 label 包裹 input：
<label><input type="radio"> 选项文字</label>，直接给label写样式 - 如果 label 和 input 分离：
<input id="a"><label for="a">选项文字</label>，同样选label，不是input - 别漏单位：写成
label { font-size: 16px; }，不是font-size: 16
示例 CSS：
label.radio-label {
font-size: 14px;
line-height: 1.5;
}
移动端点击区域小？别只调字号，补 padding
单纯放大 font-size 不会增大可点击范围。iOS 和 Android 对触摸目标有最低尺寸要求（推荐 ≥44×44px），而默认 radio 的点击区极小。
- 给
label加padding: 12px 0;，既撑开点击区，又保持文字垂直居中 - 避免用
height硬撑，容易和line-height冲突导致错位 - 若 label 是 inline 元素（默认），加
display: inline-block;才能让 padding 生效
disabled 状态下字号不变，但颜色/透明度会被 UA 覆盖
radio 按钮禁用时，关联的 label 文字不会自动变小，但浏览器会压暗颜色、降低对比度，甚至加 opacity。如果你手动设了 font-size，它依然有效；但想统一禁用态视觉，得显式控制：
- 加
label:disabled或label[aria-disabled="true"]选择器（取决于你怎么触发禁用） - 补
color: #999;和cursor: not-allowed;，必要时加!important抗 UA 样式 - 注意：原生
input[type="radio"]:disabled + label不生效——+是相邻兄弟，但 DOM 中 label 很少紧跟在 input 后面；更可靠的是用label[for="xxx"]:has(input:disabled)（需现代浏览器支持）或 JS 控制 class
最稳的写法还是让 JS 在禁用时给 label 加个 is-disabled 类，然后纯 CSS 处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
