原生select无法渲染图标，因<option>只支持纯文本且不解析HTML；可行方案是用role="combobox"等ARIA语义化组合替代，确保无障碍支持与图标自由嵌入。
原生 select 无法直接渲染图标
浏览器对 <select> 的样式控制极其有限，<option> 标签只支持纯文本，不解析 HTML（包括 <img>、<i> 或背景图）。强行写入图标标签会被忽略，或导致选项文字错乱。
常见错误现象：在 <option> 里写 <i class="icon-user"></i> 用户，实际下拉中只显示“用户”，图标完全不出现。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）均不支持
<option>内嵌 HTML -
background-image在<option>上多数无效（Firefox 部分支持但行为不一致） - 移动端（iOS Safari）对自定义下拉的限制更严格，原生控件几乎不可定制
用 <div> + aria-haspopup 模拟可图标化下拉
真正可行的方案是放弃原生 <select>，改用语义化组合：一个带 role="combobox" 的触发器 + 一个 role="listbox" 容器，每个选项用 <div role="option"> 包裹，内部可自由放 <img>、<svg> 或字体图标。
关键点不是“怎么加图标”，而是“怎么让屏幕阅读器和键盘操作仍能正常工作”：
立即学习“前端免费学习笔记（深入）”；
- 触发器需有
aria-expanded和aria-controls属性，指向列表容器 ID - 每个选项需有
aria-selected，并响应Enter/Space/ 方向键 - 选中状态要同步更新隐藏的
<input type="hidden">或data-value，供后端读取 - 图标建议用
<svg>内联，避免额外 HTTP 请求和加载闪烁
示例结构片段：
<div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-controls="country-list">
<span aria-hidden="true"><svg viewBox="..."><use href="#flag-cn"/></svg> 中国</span>
<input type="hidden" name="country" value="CN">
</div>
<div id="country-list" role="listbox">
<div role="option" data-value="CN" aria-selected="true">
<svg viewBox="..."><use href="#flag-cn"/></svg> 中国
</div>
<div role="option" data-value="US">
<svg viewBox="..."><use href="#flag-us"/></svg> 美国
</div>
</div>
第三方库选型注意兼容性与无障碍
如果项目允许引入依赖，Choices.js、tom-select 或 select2 都支持图标，但默认不启用无障碍支持，必须手动配置。
容易被忽略的坑：
-
Choices.js的itemSelectText和shouldSort默认值会影响键盘导航逻辑 -
select2在4.0+版本移除了对<option>中 HTML 的支持，必须用templateResult回调注入图标 - 所有库在
form.reset()后不会自动还原图标状态，需监听reset事件手动重置 - 若使用 Webpack/Vite，确保 SVG 字体或图标集已正确 resolve，否则生产环境图标可能 404
图标尺寸与对齐必须用 CSS 精确控制
图标和文字混排时，行高、垂直对齐、间距稍有偏差就会显得廉价。不要依赖默认 vertical-align。
- 给图标容器设
display: inline-flex; align-items: center;，比vertical-align: middle更可靠 - 图标
width/height建议统一为1em，随字体大小缩放 - 文字和图标之间加
margin-inline-start: 0.375em（即 6px @16px），避免挤在一起 - 禁用
user-select: none在图标上，否则双击选中文本时会意外中断
最麻烦的其实是高对比度模式（Windows HC）下，部分 SVG 填充色会被强制覆盖，需额外用 @media (forced-colors: active) 重置 fill/stroke。
