radio后加提示图标应放在label内用span包裹并设aria-hidden="true"，或用::after伪元素实现；需配合vertical-align: middle、padding-right扩大点击区，并通过aria-label或aria-describedby提供无障碍语义。
radio后面加提示图标，别用title或alt
原生input[type="radio"]不支持title气泡提示（部分浏览器会忽略），alt属性对它完全无效。想在单选框右侧显示图标（如 ✅、⚠️、ℹ️），必须靠 DOM 结构配合 CSS 控制，不能依赖属性渲染。
最稳妥的做法是：把图标作为<label></label>的一部分，和文字并列，而不是塞进input里。
- 写法示例：
<label><input type="radio" name="agree" value="yes">我已阅读并同意<span class="hint-icon" aria-hidden="true">ℹ️</span></label> - 图标用
span包裹，加aria-hidden="true"避免屏幕阅读器重复读取 - 不要给
input加margin-right再放图标——焦点框会包不住图标，视觉割裂 - 若需响应选中状态动态换图标（比如选中时变✅），用
input:checked + label .hint-icon控制content或background-image
用CSS伪元素动态显示状态图标，避开DOM冗余
如果不想在HTML里硬写图标字符，可以用::after伪元素生成，更利于统一维护和主题切换。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 基础样式：
input[type="radio"] { position: relative; } input[type="radio"]::after { content: "ℹ️"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font-size: 14px; } - 选中时替换：
input[type="radio"]:checked::after { content: "✅"; color: #28a745; } - 注意
position: relative必须加在input上，否则::after的绝对定位会相对于父容器，容易错位 - 移动端点击区域小？给
label加padding-right: 32px，把图标区域也纳入可点击范围
图标位置偏移或重叠，检查vertical-align和行高
默认input[type="radio"]是vertical-align: baseline，和文字底部对齐，但图标常会下沉或上浮，导致视觉错位。
立即学习“前端免费学习笔记（深入）”；
- 统一设
vertical-align: middle在input和图标容器上 - 若用
span放图标，确保其line-height与父label一致，否则文字和图标上下不对齐 - 避免用
margin-top强行拉图标——它会破坏行内流，尤其在多行文本中易引发换行异常 - 调试技巧：临时加
outline: 1px solid red看图标和radio的实际占位盒
屏幕阅读器怎么读提示图标？别只靠视觉
纯图标（如 ℹ️）对屏幕阅读器不可读，用户可能完全不知道它的含义。必须补充语义。
- 给图标
span加aria-label="提示：请仔细阅读条款"，覆盖默认读音 - 或者用
aria-describedby="hint-1"指向一个隐藏的<div id="hint-1" class="sr-only">…</div> - 不要只写
aria-label在input上——它会覆盖掉原本的选项文字，用户听不到“我已阅读并同意” - 隐藏辅助文本推荐用
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }，比display: none更安全
input本身没宽高，::after的定位基准容易漂移；而用span时，又容易忘记aria-hidden或aria-label的配合。这两个点卡住，图标就只剩“好看”，没有“可用”。 
