根本原因是原生<select>未被正确替换或重复执行form.render('select')，导致原生箭头与Layui生成的. layui-unselect伪箭头并存；需检查form标签、lay-filter属性、DOM结构及避免重复渲染。
为什么 layui select 渲染出两个下拉箭头
根本原因是原生 <select> 没被正确替换，或被重复执行了 form.render('select')。Layui 的 select 组件会把原生下拉隐藏，再在其旁插入一个带 .layui-unselect 的伪箭头；如果原生元素没隐藏、或渲染了两次，就会看到两个箭头并存——一个来自原生控件，一个来自 Layui 生成的 UI。
检查是否漏掉 form 标签或 lay-filter 属性
Layui 的 form.render() 只作用于包裹在 <form class="layui-form"> 内、且有 lay-filter 属性的表单元素。若 <select> 直接写在 body 下，或 form 标签缺失 class="layui-form"，Layui 就不会接管它，原生箭头保留，同时你又手动调用了 form.render('select')，结果就叠加出两个。
- 确保
<form>标签包含class="layui-form"和lay-filter="xxx" - 确认
<select>是该form的直接子元素（或至少是后代），不能跨层级被其他 JS 插入到非 form 区域 - 避免在页面初始化后多次无条件调用
form.render('select')，尤其不要在 AJAX 回调里重复 render 同一区域
排查重复渲染和 DOM 残留
常见于动态加载表单内容（比如弹窗内用 layer.open 加载 HTML 片段）：第一次渲染后 DOM 已存在 .layui-form-select 结构，第二次再调 form.render('select')，Layui 不会自动清理旧结构，而是新建一套，导致双箭头+双标题栏。
- 动态插入的
<select>，务必在插入 DOM 后、首次渲染前，先清空目标容器内已有的.layui-form-select：$('#container').find('.layui-form-select').remove() - 如果用了
form.render('select', 'filterName')，确保filterName和form的lay-filter值完全一致，否则会 fallback 到全局渲染，可能误触其他区域 - 检查浏览器开发者工具 Elements 面板，看
<select>元素是否还存在（未被display: none），以及旁边是否有多个.layui-form-select父容器
禁用原生 select 的默认样式（临时兜底）
当以上都确认无误但仍有双箭头，可强制隐藏原生箭头，只留 Layui 渲染的那一套。这不是推荐解法，但能快速验证问题根源是否在 DOM 接管失败。
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 配合 padding-right 给伪箭头留空间 */
}
注意：这段 CSS 必须加在 Layui 样式之后，且仅作用于你明确要接管的 select（比如加个自定义 class），否则会影响所有原生下拉框，包括未用 Layui 渲染的场景。
