单选框本身不能加下划线，应仅对关联的label文本使用text-decoration: underline；避免用标签，注意下划线语义、可访问性及浏览器兼容性。
radio 单选框本身不能也不该加下划线——input[type="radio"] 是表单控件，不是文本容器；所谓“给单选框加下划线”，实际需求几乎全是「给单选框旁边的 label 文本加下划线」，且必须区分语义和交互意图。
label 文本加下划线：用 text-decoration，别碰 <u></u>
想让「男」「女」「其他」这类选项文字带下划线，直接对 label 或其子元素设 CSS：
-
text-decoration: underline是唯一推荐方式，兼容 IE6+，语义清晰 - 绝对不要用
<u>男</u>包裹文字——HTML5 中<u></u>仅限拼写错误、专有名词等语义场景，屏幕阅读器可能误读，协作时易引发误解 - 如果下划线穿过了字母
g或y的降部，加text-underline-offset: 2px（Chrome 95+ / Firefox 89+ / Safari 15.4+ 支持）；旧浏览器 fallback 用border-bottom: 1px solid currentColor
链接式单选选项？先确认是否真需要下划线
若你把单选框当「可点击卡片」用（比如主题切换、语言选择），并希望用户感知“可点”，下划线反而是错误信号：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 下划线在 Web 中强关联「超链接」，用户会预期跳转或新页面，而非表单状态切换
- 正确做法是：移除默认下划线，改用
cursor: pointer+ 轻微背景色变化 +:focus-visible边框强化键盘可访问性 - 真要模拟链接感，也应统一用
border-bottom: 1px dotted #666（虚线比实线干扰小），且确保 disabled 状态下样式同步失效
radio 组内文本对齐与下划线长度控制
多个 label 水平排列时，下划线长度不一致很常见，原因常被忽略：
立即学习“前端免费学习笔记（深入）”；
-
text-decoration默认按内容宽度渲染，遇到空格、全角字符、不同字体宽度就会错位 - 解决方法：给
label设display: inline-block; width: max-content或固定min-width，再统一加下划线 - 若需下划线只覆盖关键词（如「付费升级」），别给整个
label加，而是在span上单独加类，并启用text-decoration-skip-ink: auto避免切穿字母笔画 - 行高
line-height过小会导致下划线贴底难看，建议至少设为1.4以上
真正容易翻车的点不在“怎么加”，而在“加完之后是否还符合表单语义”——下划线一旦和链接、错误标注、专有名词混用，可访问性检测工具会报错，键盘用户可能迷失焦点流，屏幕阅读器也可能跳过或误读。每次加之前，先问一句：这个下划线，是帮用户更快理解，还是在制造歧义？
