要修改 Layui select 下拉项 hover 背景色，需针对 .layui-form-select dl dd:hover 设置 !important 样式；若需按选项类型差异化，应在 <option> 添加 data-type 属性，并配合属性选择器定义对应 hover 样式。
layui select 下拉选项 hover 背景色怎么改
不能直接给 <option> 写 :hover 样式——Layui 渲染后，原生 select 已被完全隐藏，下拉面板是用 <dl><dd> 模拟的 DOM 结构，所有交互样式必须作用于这些伪元素。
.layui-form-select dl dd:hover 生效但需加 !important
下拉列表项对应的是 .layui-form-select dl dd，它的 hover 背景色默认由 layui 内置样式控制（如 background-color: #f6f6f6），若要覆盖，CSS 必须带 !important 且选择器足够具体：
.layui-form-select dl dd:hover {
background-color: #e6f7ff !important;
color: #1890ff !important;
}
- 别只写
dd:hover，不加父级限定容易污染其他 dl 列表 - 如果用了多级下拉或搜索增强插件（如 xmSelect），该规则无效——那是另一套 DOM 结构
- 某些 Layui 版本会把 hover 样式写在
.layui-anim或.layui-form-select dl上，可打开开发者工具检查真实生效节点
动态状态切换时别依赖 JS 操作 style.backgroundColor
想根据值类型（如“禁用”“异常”）让不同选项 hover 色不同？不建议在 form.on('select()') 里遍历所有 dd 并设 style.backgroundColor，原因有三：
- 每次下拉展开都会重新渲染
dl，JS 设置的内联样式会被清空 - hover 是伪类行为，内联样式无法响应鼠标移入/移出，只能靠 CSS 类驱动
- 性能差：监听一次 change 就查一遍所有
dd，再循环 setAttribute，卡顿明显
正确做法是预设 CSS 类，并在渲染前通过 data 属性打标：
<option value="1" data-type="error">高风险</option> <option value="2" data-type="normal">正常</option>
再配合 CSS：
.layui-form-select dl dd[data-type="error"]:hover { background-color: #fff2f0 !important; }
.layui-form-select dl dd[data-type="normal"]:hover { background-color: #f0f9ff !important; }
为什么改了没反应？先检查这三点
常见失效原因不是代码错，而是环境干扰：
-
form.render('select')被重复调用——它会重建整个下拉 DOM，你刚加的 class 或样式绑定全丢失 - 用了
lay-search属性：开启搜索后，Layui 会把原始dd替换为带输入框的结构，dd:hover规则自动失效 - CSS 文件加载顺序不对：你的样式表必须在 layui.css 之后引入，否则
!important都压不过内联 style
最稳的验证方式：打开浏览器开发者工具，手动在 dd 元素上右键 → “强制状态” → :hover，看样式是否实时生效——能生效说明路径对，不能说明选择器没命中或被覆盖。
