HTML原生select不支持图标和富文本，必须用div模拟下拉；推荐隐藏原生select，用ul/li构建菜单并同步值，兼顾语义化与交互体验。
HTML 原生的 <select> 标签不支持直接在选项中插入图片或富文本（如图标、颜色、自定义字体等），它只接受纯文本内容。要实现“带图标的富文本下拉菜单”，必须借助 JavaScript 和自定义 DOM 结构来模拟，也就是常说的「自定义下拉组件」。
为什么原生 select 不行
浏览器对 <option> 标签的渲染限制极严：
- 不允许嵌套 HTML 元素（<img>、<span> 等会被忽略）
- 无法设置背景图、伪元素、内联样式（部分浏览器连 style 属性都忽略）
- iOS Safari 和旧版 Edge 对 option 的样式支持几乎为零
推荐实现方式：用 div 模拟下拉（轻量可控）
核心思路：隐藏原生 select，用 <div> + <ul><li> 构建可视化菜单，通过 JS 同步选中状态和值。
-
结构示例：
<div class="icon-select"> <button class="select-trigger"><i class="icon-user"></i> 张三</button> <ul class="select-dropdown"> <li data-value="1"><i class="icon-user"></i> 张三</li> <li data-value="2"><i class="icon-team"></i> 技术部</li> <li data-value="3"><i class="icon-mail"></i> admin@xxx.com</li> </ul> <select class="visually-hidden" name="user"> <option value="1">张三</option> <option value="2">技术部</option> <option value="3">admin@xxx.com</option> </select> </div> -
关键点：
- 使用
visually-hidden类（如position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;）保留语义化表单能力（无障碍、表单提交、SEO） - 图标建议用 SVG 内联或字体图标（如 Font Awesome、IconPark），确保可缩放、无加载延迟 - 点击li时，更新按钮文案和图标，并同步设置隐藏select的value和selectedIndex
快速上手：用 CSS + 少量 JS 实现基础版
只需几行代码即可运行（无需框架）：
-
CSS 控制展开/收起：给
.select-dropdown设display: none，点击按钮时加类open并设display: block；配合transition: max-height或opacity做动画 -
JS 绑定交互：
const trigger = document.querySelector('.select-trigger'); const dropdown = document.querySelector('.select-dropdown'); const selectEl = document.querySelector('.visually-hidden'); const options = document.querySelectorAll('.select-dropdown li'); <p>trigger.addEventListener('click', () => { dropdown.classList.toggle('open'); });</p><p>options.forEach(option => { option.addEventListener('click', () => { const value = option.dataset.value; const text = option.textContent.trim(); trigger.innerHTML = option.innerHTML; // 复制含图标的 HTML selectEl.value = value; dropdown.classList.remove('open'); }); }); -
增强体验细节：
- 按 Esc 键关闭下拉
- 点击外部区域自动收起（监听
document.click） - 支持键盘导航（↑↓+Enter） - 为li添加role="option"、aria-selected提升无障碍支持
更省事的选择：成熟 UI 库
如果项目已引入以下库，直接使用其封装组件更稳妥：
立即学习“前端免费学习笔记（深入）”；
-
Bootstrap 5+：配合
dropdown+ 自定义dropdown-item，需手动处理表单绑定 -
Element Plus / Ant Design Vue / MUI React：提供
Select组件，支持optionLabel插槽或renderOption函数，可自由写图标+文字 - Vanilla JS 方案：[Choices.js](https://github.com/jshjohnson/Choices) 或 [Tom Select](https://tom-select.js.org/) —— 轻量、支持模板渲染、远程搜索、多选，且兼容性好
不复杂但容易忽略：始终保留原生 select 或用 <input type="hidden"> 同步值，否则表单提交或后端接收会丢失数据。
