直接改 .layui-edge 不生效，因其图标是硬编码的 unicode 字符（如 ），非 css content 生成；css 覆盖被内联文本优先级压制，js 修改又被 form.render() 覆盖。
不能直接改 .layui-edge 的图标字符或 background-image，Layui 用的是内联 Unicode 字符，且该元素被包裹在 .layui-select-title 内，样式受多层 CSS 和 JS 控制；强行覆盖容易导致下拉失灵或箭头错位。
为什么直接改 .layui-edge 不生效
Layui 渲染 select 后，右侧小三角由 <i class="layui-edge"></i> 构成，这个字符是硬编码进 DOM 的，不是通过 CSS content 插入。你用 CSS 改 .layui-edge::before { content: "↓" } 会被内联文本覆盖；用 JS 改 innerHTML 又可能被 Layui 下次 form.render() 覆盖掉。
常见错误现象：
- 加了
!important的 CSS 仍不显示新图标 - JS 修改后，点开下拉框又变回默认 ▼
- 箭头位置偏移、大小异常，甚至遮挡输入框文字
安全替换小三角的两种实操方式
必须等 Layui 渲染完成后再操作，推荐在 form.render() 或 layui.use 回调里执行：
- 方式一：用 JS 替换
.layui-edge的 innerHTML（最稳）$('.layui-form-select .layui-edge').html(''); // 换成 layui-icon-down
注意：要确保图标字体已加载（即layui.css已引入），且只对已渲染的 select 生效。 - 方式二：用 CSS 隐藏原生图标 + 绝对定位覆盖新图标
先隐藏：.layui-form-select .layui-edge { display: none; }
再加新图标容器：.layui-select-title { position: relative; }<br>.layui-select-title::after { content: "▼"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
缺点：移动端点击区域可能变小，需手动扩大热区。
修改后要注意的兼容性问题
小三角不只是视觉元素，它和下拉行为强绑定：
- 如果用了自定义图标字体（如 iconfont），必须保证该字体在
.layui-edge所在上下文中可访问，否则显示为方块 - Layui 2.8+ 在暗色主题下会自动给
.layui-edge加color: #999，若你用 SVG 或图片图标，得同步控制颜色 - 表格内嵌 select、弹窗中动态生成的 select，需在
done回调或layer.open的success钩子里重复执行替换逻辑，否则新渲染的不会更新 - 别用
form.render('select')触发重绘后不重置图标——它会把.layui-edge恢复成默认字符，必须监听form.render完成后的时机再覆盖一次
真正难的不是换图标，而是换完之后每次 form.render()、表格 reload、layer 重开都会把它打回原形，必须把替换逻辑封装成可复用函数，并在所有可能触发重绘的地方显式调用。
