layui select下拉框边框颜色需修改.layui-select-title的border样式并加!important；下拉面板阴影由.layui-form-select dl的box-shadow控制，同样需!important覆盖。
layui select 下拉框边框颜色怎么改
原生 select 元素在 layui 中已被完全替换为伪 DOM 结构，直接给 select 写 border 样式无效。真正起作用的是渲染后的外容器和标题栏节点。
核心目标节点是：.layui-form-select（外层包裹）、.layui-select-title（顶部显示区）；其中改 .layui-select-title 的 border 最直观、副作用最小。
- 必须加
!important，因为 layui 渲染时会内联写入border: 1px solid #d2d2d2 - 推荐只改
.layui-select-title，避免动.layui-form-select的box-shadow或border，否则易和主题冲突 - 若需不同状态（如禁用/错误），建议预设类名，用
addClass('border-error')切换，比内联 style 更稳定
示例 CSS：
.layui-select-title {
border: 1px solid #2080f0 !important;
}
layui select 的下拉面板阴影如何控制
下拉面板（即点击后展开的选项列表）的阴影由 .layui-form-select dl 或其子元素 .layui-anim 控制，不是通过配置项，而是纯 CSS 覆盖。
注意：这个阴影和弹窗 layer.open 的 boxShadow 无关，也和遮罩层 shade 完全无关。
- 默认阴影来自
.layui-form-select dl的box-shadow: 0 2px 4px rgba(0,0,0,.12) - 要彻底去掉，写
box-shadow: none !important；要调浅，改rgba的 alpha 值（如rgba(0,0,0,.05)） - 别漏掉
.layui-form-select dl后可能追加的动画类（如.layui-anim-upbit），某些版本会把阴影写在动画类里
示例 CSS：
.layui-form-select dl {
box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
为什么改了 CSS 还没生效？常见失效原因
不是代码写错，而是被更高优先级规则覆盖或 DOM 未就绪。
- 样式没加
!important—— layui 渲染后常带内联style，普通选择器赢不了 - CSS 放得太早，比如写在
里但 layui.js 还没加载完，DOM 节点不存在，样式不匹配 - 用了自定义
skin类，结果该 class 里又重写了.layui-form-select相关样式，形成干扰 - 页面同时引入了其他 UI 框架（如 Bootstrap），其全局
dl, dd, dt样式污染了下拉面板结构
验证方式：打开开发者工具，选中下拉面板最外层 dl 元素，看 computed 样式里 box-shadow 和 border 的来源是否是你写的那条规则。
动态改边框/阴影要不要 JS？什么场景必须用
纯静态样式（如所有 select 都统一蓝边）用 CSS 就够了；但涉及「根据值变色」「提交失败后标红」这类逻辑，就必须 JS 驱动。
关键不是“能不能”，而是“改哪个节点”——JS 必须操作渲染后的节点，不能操作原始 select。
- 监听
change事件后，用$(elem).next('.layui-form-select').find('.layui-select-title')拿到标题栏 DOM - 不要用
document.querySelector('select')然后 setAttribute，那改的是隐藏的原生元素 - 如果表单用了
form.render('select')重渲染，之前加的 class 会丢失，需在 render 后重新 apply
一句话收尾：边框和阴影都得落在 .layui-select-title 和 .layui-form-select dl 上，别的地方改等于白改。
