单选框本身不能加下划线，应仅对关联的label文本使用text-decoration: underline；避免用标签，注意下划线语义、可访问性及浏览器兼容性。

radio 单选框本身不能也不该加下划线——input[type="radio"] 是表单控件，不是文本容器；所谓“给单选框加下划线”，实际需求几乎全是「给单选框旁边的 label 文本加下划线」，且必须区分语义和交互意图。

label 文本加下划线：用 text-decoration，别碰

想让「男」「女」「其他」这类选项文字带下划线，直接对 label 或其子元素设 CSS：

• text-decoration: underline 是唯一推荐方式，兼容 IE6+，语义清晰
• 绝对不要用 男 包裹文字——HTML5 中 仅限拼写错误、专有名词等语义场景，屏幕阅读器可能误读，协作时易引发误解
• 如果下划线穿过了字母 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 以上

真正容易翻车的点不在“怎么加”，而在“加完之后是否还符合表单语义”——下划线一旦和链接、错误标注、专有名词混用，可访问性检测工具会报错，键盘用户可能迷失焦点流，屏幕阅读器也可能跳过或误读。每次加之前，先问一句：这个下划线，是帮用户更快理解，还是在制造歧义？

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！