单选框本身无字体，需调大其关联label文字；仅改font-size无效，必须同步设置padding和line-height，并推荐用flex布局实现精准垂直居中。
单选框（input[type="radio"]）本身没有字体，你真正要调大的是它旁边的 label 文字。直接对 input 设置 font-size 无效，且容易引发对齐错乱。
label 字体放大必须配合 padding 和 line-height
只改 font-size 会导致点击区域没变、文字挤出或上下偏移，尤其在小屏下更明显。
- 用 CSS 变量统一控制，例如：
:root { --radio-label-size: 16px; }，再在label.radio-option上写font-size: var(--radio-label-size); - 必须同步设置
padding: 12px 0;或类似值，让点击热区随字号等比扩大 - 务必检查
line-height：如果没设，浏览器会按默认值（常为 1.2）计算行高，字号变大后可能文字贴顶或下沉；建议显式写line-height: 1.5;或line-height: 1.4em; - 移动端适配时，别只靠媒体查询改
font-size，也要同步调padding和line-height，否则手指点不准
为什么 vertical-align: middle 总是对不齐？
因为 vertical-align: middle 对齐的是“x 字母的中心线”，不是文字视觉中线。中文无 x，不同字体、字号下偏移量完全不同，Chrome/Firefox 渲染结果也不一致。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 不要依赖
vertical-align单独修复对齐 —— 它本质是行内布局的副作用，不是设计用来对齐表单控件的 - 正确解法是把
input和label包进一个容器，设display: flex; align-items: center; - 容器内去掉
input的所有vertical-align、float、margin-top等干扰项 - 若 label 内容多行，加
align-self: flex-start;防止文字被垂直拉伸
appearance: none 后怎么安全重绘 radio？
现代浏览器支持 appearance: none，但它只是“清空默认样式”，不是“开启自由绘制模式”。漏掉关键声明就会渲染异常或不可见。
立即学习“前端免费学习笔记（深入）”；
- 必须显式定义
width和height（如18px），否则元素坍缩为 0 -
border-radius: 50%在 Safari 旧版中不稳定，圆角建议加clip-path: circle();备用 - 选中状态用
input:checked::after绘制内点时，要确保margin值能让它居中（如margin: 4px;对应 18px 宽高减去 8px 内点） - IE11 / Android 4.4 不支持
appearance，需 fallback：用position: absolute; opacity: 0; pointer-events: none;彻底隐藏原生控件，再用label::before模拟外圈
最易被忽略的点是：改完 label 字号后，没人检查 line-height 和 padding 是否同步更新 —— 这直接决定用户能不能准确点中，尤其在折叠屏或高 DPI 设备上。
