layui select 下拉项选中后文字加粗需监听 change 事件并手动设置 input 内联样式,表格内 dropdown 列需用 templet 自定义或颜色/背景色替代加粗,formselects 可直接样式化 .xm-select-label。

layui select 下拉项选中后文字加粗,不能靠 CSS 类名全局覆盖
直接写 .layui-select-title .layui-input { font-weight: bold; } 会失效——因为 Layui 渲染后动态插入的选中文本是纯文本节点,不包裹在可样式化的标签里,且内部有 !important 覆盖。你改的只是输入框占位符或初始状态,不是“已选中后的显示文本”。
真正生效的方式:监听 change 事件 + 手动设置 input 的 value 样式
Layui 的 select 组件选中后,实际展示在标题栏的是一个 <input type="text">,它的值由 JS 动态赋值。要加粗,得在选中后立刻给这个 input 加内联样式:
- 用
form.on('select(filterName)', callback)捕获选中事件 - 在回调里通过
layui.$('.layui-select-title .layui-input')定位到当前 input 元素 - 调用
.css('font-weight', '600')(别用'bold',部分字体下解析不准) - 注意:如果页面有多个 select,需用
$(this).closest('.layui-form-item').find('.layui-input')精准定位,避免误改其他下拉框
表格内 dropdown 列的选中文字加粗要单独处理
table 中的 type: 'dropdown' 是独立渲染逻辑,不走 form 模块的事件流。它的选中文字在 .layui-table-cell 内,但属于只读文本,无法直接设样式。可行路径只有:
- 在列定义中使用
templet自定义单元格内容,把下拉逻辑和显示分离 - 或改用
cellMinWidth+style控制宽度,配合unresize: true防止文字被截断,视觉上更清晰 - 不要试图用
td { font-weight: 600; }—— table 内部样式权重极高,且会同时影响所有列
formSelects 插件的加粗更简单,但要注意 skin 冲突
如果你用的是第三方 formSelects,它默认支持 xm-select-skin 属性控制主题色,而加粗需额外干预:
- 插件渲染后,选中标签会生成
<span class="xm-select-label"></span>,可直接写 CSS:.xm-select-label { font-weight: 700; } - 但若设置了
xm-select-skin="primary",某些皮肤 CSS 里自带font-weight: normal,必须加!important - 动态添加的标签(如搜索创建的新项)可能不触发重绘,建议在
on('search', ...)回调里手动补样式
color 和 background-color 的优先级更可靠。











