layui-select-dropdown的width必须用!important覆盖，因其宽度由js内联写死（如style="width:120px;"），普通css声明无效；正确写法为.layui-select-dropdown{width:200px!important}。
layui-select-dropdown 的 width 必须用 !important 覆盖
layui 动态生成的下拉框 DOM 会套上 .layui-select-dropdown 类，但它的 width 默认由 JS 计算并内联写死（比如 style="width: 120px;"），直接写 CSS 不生效。不加 !important 就会被内联样式干掉。
常见错误：只写 .layui-select-dropdown { width: 200px; } → 完全无效
正确写法：
.layui-select-dropdown {
width: 200px !important;
}
如果只想改某个 select，给它加个自定义 class（比如 class="my-select"），再用后代选择器：
.my-select .layui-select-dropdown {
width: 250px !important;
}
全局改宽 vs 局部改宽，选对作用域很关键
全局改（所有 select 都变）：直接用 .layui-select-dropdown，但要注意影响范围——包括表单里所有 select、表格编辑弹层里的下拉、甚至 layer.prompt 里嵌的 select。
局部改（只改某几个）：必须用唯一标识锚定，比如：
- 给
select标签加id="user-type-select"，然后写#user-type-select + .layui-select-dropdown - 或用父容器 class 包裹：
<div class="form-user"><select></select></div>，再写.form-user .layui-select-dropdown - 避免用
layui-form-select作为前缀——这个类在 select 标签上，而下拉框是兄弟节点，不是子节点
宽度设太小会导致 option 文字被截断
layui 下拉项（dd）默认继承父级宽度，且没做 white-space: normal，长文本直接溢出或显示省略号。
要让文字折行或撑开，得额外加：
.layui-select-dropdown dl dd {
white-space: pre-wrap;
word-break: break-word;
max-width: none;
}
注意两点：
-
dl是下拉列表容器，dd是每个选项；只改.layui-select-dropdown宽度不够，内容还是被裁 - 别用
word-break: break-all，它会在任意字符间断行，中文名“张三丰”可能变成“张三”和“丰”两行
动态渲染后宽度失效？检查 CSS 加载顺序
layui 自身 CSS 加载完之后，你的自定义样式才生效。如果用了构建工具（如 webpack）、CDN 异步加载、或者把样式写在 <script></script> 后面，就可能被 layui.css 覆盖。
确认方式：打开开发者工具，看 .layui-select-dropdown 的 width 声明是否被划掉（即被更高优先级样式覆盖）。
稳妥做法：
- 把自定义 CSS 放在
<link href="layui.css">之后的<style></style>或单独 CSS 文件里 - 如果用了
layui.use(['form'], ...)，确保 DOM 已渲染完成再插入样式（比如在form.render()之后） - 极端情况可加
body上的 class 锚定：body.layui-loaded .layui-select-dropdown，配合 JS 在 render 完后加 class
真正容易被忽略的，是下拉框 DOM 并非初始存在——它是点击后才 append 到 body 底部的，所以样式必须全局有效，不能依赖父级作用域。
