layui select下拉箭头被覆盖或不显示的根本原因是其伪元素.layui-edge与内联样式干扰，须在form.render()后注入自定义图标节点并用CSS隐藏原箭头、重置padding-right、绝对定位新图标。
layui select 下拉箭头图标被覆盖或不显示
默认情况下，layui 的 select 组件右侧箭头是通过伪元素 ::after 和内置字体（layui-icon）绘制的，但它的样式层级高、定位固定，直接改 content 或替换字体容易失效。根本原因不是“换图标”，而是“绕过 layui 的默认覆盖逻辑”。
- layui 会在渲染后给
.layui-select添加内联 style，强制设置background和padding-right，干扰自定义图标定位 - 直接在
select标签里加lay-ignore没用——这个属性只对表单美化生效，不影响下拉箭头 - 必须等 layui 渲染完成后再操作 DOM，否则刚插入的
i图标会被 layui 覆盖或移除
用 layui.use('form') 后手动注入图标节点
在 form 模块加载完毕、且 form.render() 执行之后，遍历所有已渲染的 .layui-select 容器，在其内部追加一个 <i class="my-icon"></i>，再用 CSS 定位覆盖原箭头。
- 确保执行时机：放在
form.on('select(...)')回调外、form.render()之后，或使用setTimeout(..., 0)微任务延后 - 推荐选择器：
$('.layui-form-select')，每个对应一个 select，避免操作原始select标签 - 插入位置：在
.layui-select内部末尾添加，例如：$select.append('<i class="my-icon"></i>') - CSS 关键点：设置
position: absolute+right: 15px+top: 50%+transform: translateY(-50%)，并加z-index: 2确保压住原箭头
隐藏原生箭头并重置 padding
layui 默认给 .layui-select 设置了 padding-right: 30px 和背景图，必须显式清除才能让自定义图标对齐。
- 用 CSS 强制隐藏原箭头：
.layui-form-select .layui-edge { display: none; } - 重置容器右内边距：
.layui-form-select { padding-right: 36px !important; }（根据你的图标宽度微调） - 如果用了 iconfont，确保
@font-face已加载，且.my-icon::before的font-family和content正确，例如：content: '\e615'; - 注意：不要用
!important覆盖.layui-select的background，只需清空它：background: none;
动态新增 select 时图标丢失怎么办
页面后续用 JS 动态插入的 select，即使调用了 form.render('select')，也不会自动触发你的图标注入逻辑——因为那是你手动写的 DOM 操作，不是 layui 原生行为。
- 每次新增后，必须显式调用你的图标注入函数，比如封装为
injectSelectIcon() - 或者监听
form.render的完成事件（layui 没有公开事件，可用 MutationObserver 监听.layui-form-select新增） - 更稳妥的做法：把图标注入逻辑写成独立函数，并在所有可能触发
form.render()的地方之后调用一次 - 别依赖
form.on('select')——这个事件只响应值变化，不响应 DOM 渲染
真正麻烦的不是换图标，而是和 layui 的渲染节奏博弈；它不暴露钩子，就得靠 timing + DOM 观察 + 样式层叠来卡位。稍晚一点，图标被盖；稍早一点，容器还没生成。
