要修改 layui 下拉框字体大小,需设置 .layui-select-title、.layui-form-select dl dd 和 dt 的 font-size,并加 !important;若启用搜索,还需设置 .layui-select-title input[lay-search];CSS 应在 form.render() 前加载,且需同步调整 line-height 和 padding,统一使用 px 单位。

直接改 .layui-select-title 和 .layui-form-select dl 的 font-size
layui 渲染后的下拉框不是原生 <select>,而是用伪元素构建的 DOM 结构,所以不能对原始 select 设置 font-size。真正起作用的是两个地方:.layui-select-title(顶部显示区域)和 .layui-form-select dl dd(下拉选项列表)。
-
.layui-select-title控制顶部文字大小,建议加!important防止被 layui 内部样式覆盖 -
.layui-form-select dl dd控制每个选项的文字,dt是分组标题(如有),也需一并设置 - 不要只改
dl,它只是容器,字体样式必须落到dd或dt上才生效 - 如果用了
lay-search,搜索输入框的字体在.layui-select-title input里,需单独处理
示例 CSS:
.layui-select-title {
font-size: 14px !important;
}
.layui-form-select dl dd,
.layui-form-select dl dt {
font-size: 14px !important;
}
.layui-select-title input[lay-search] {
font-size: 14px !important;
}
动态修改时别漏掉已渲染的下拉项
如果你是页面加载后、通过 JS 动态触发 form.render('select') 才生成下拉框,那上面的 CSS 必须在 form.render() 之前就已加载,否则新生成的 dd 元素可能没继承到样式。
- 推荐把自定义字体样式写在全局 CSS 文件里,或
<style>标签放在layui.js引入之后、form.render()调用之前 - 如果用 JS 动态插入 style 标签,注意要等
layui.use(['form'])回调执行完再注入,否则 DOM 还没生成,选择器匹配不到 - 某些场景(如表格内嵌 select)会多次渲染,
.layui-form-select可能存在多个副本,CSS 规则必须足够通用,避免只命中第一个
移动端适配要注意 line-height 和 padding
单纯调大 font-size 容易导致文字被截断或点击热区变小,尤其在 iOS Safari 下。
-
line-height建议设为1.5或具体像素值(如20px),与font-size匹配 -
padding在.layui-select-title和dd中都要同步调整,否则视觉不协调 - 避免用
rem或em,layui 默认用 px,混用可能导致缩放异常
最稳妥的做法是:字体大小 + 行高 + 内边距三者同步微调,且全部用 px 单位,加 !important 锁死优先级。


















