layui下拉框不支持直接添加图标，因原生select元素受浏览器限制无法渲染子节点；官方推荐用lay-select配合laytpl自定义模板模拟带图标选项。
layui 下拉框（select）本身不支持直接加 icon
原生 select 元素在所有浏览器中都限制了子节点渲染能力，layui 的 layui.form.render('select') 也只是封装了样式和交互，并未突破这个限制。你看到的“带图标的下拉选项”，实际是通过自定义模板 + laytpl 渲染的模拟下拉（即 lay-select 的替代方案），而非原生 select。
用 layui 的 lay-select + laytpl 实现图标选项
这是官方推荐且兼容性最好的方式：把原生 select 隐藏，用 div 模拟下拉面板，再用 laytpl 渲染带 i 标签的选项项。
关键步骤：
- 给
select添加lay-ignore属性，避免被 layui 自动渲染成基础下拉 - 用一个
div作为触发容器，绑定点击事件展开面板 - 用
script type="text/html"写laytpl模板，里面可自由写 - 用
layui.dropdown或手写ul/li面板，配合laytpl渲染数据
示例片段（简化版）：
<div id="iconSelect">
<span id="iconSelectText">请选择</span>
<i class="layui-icon"></i>
</div>
<p><script type="text/html" id="iconSelectTpl">
{{# layui.each(d, function(index, item){ }}
<li data-value="{{item.value}}">
<i class="layui-icon {{item.icon}}">{{item.iconChar}}
{{item.name}}
{{# }); }}
</script></p>
然后用 layui.dropdown.render() 或手动绑定事件加载该模板。
用 CSS 伪元素给 option 加图标？不行
虽然有些文章建议用 option::before，但所有主流浏览器都不支持对 option 元素使用伪元素或背景图。实测 Chrome/Firefox/Edge 均会忽略，连 padding-left 都可能被重置。别白费力气写这种 CSS。
如果你强行在 option 里写 ，HTML 解析时会被浏览器自动剥离——这是规范行为，不是 layui 的锅。
第三方方案：layer.open 模拟下拉 + 图标更灵活
当选项不多、交互要求不高时，用 layer.open 弹出一个带 ul 的小面板，反而比折腾 dropdown 更快：
- 完全可控 DOM 结构，
i.layui-icon、img、甚至小 avatar 都能塞进去 - 不用处理
laytpl编译、数据绑定、焦点管理等细节 - 注意设置
offset和area，让弹层紧贴触发元素下方 - 选中后记得手动更新触发元素的显示文本，并触发自定义事件通知业务逻辑
这种方案看似“重”，实则省去大量兼容性排查时间。
真正卡住人的从来不是“怎么加 icon”，而是没意识到：layui 的 select 是装饰型组件，不是可扩展 UI 容器。一旦需要图标、多行文本、禁用态样式等，就得主动退出原生渲染链路——这点容易被文档里“一行代码启用”的描述带偏。
