Layui的textarea需用CSS强制覆盖内联height样式,核心是.min-height:120px!important和height:auto!important,否则HTML的min-height属性因内联样式优先级高而不生效。

layui 的 textarea 不支持直接通过配置项设最小高度,必须用 CSS 覆盖默认样式,且要加 !important 才能生效。
为什么 min-height 写在 HTML 里没用?
Layui 渲染表单元素时,会为 textarea 自动加上内联样式 style="height: 100px;"(具体值取决于 lay-size 或默认尺寸),这个内联样式优先级高于 HTML 的 min-height 属性,导致你写的 min-height 完全不生效。
- 不要写
<textarea min-height="120"></textarea>—— 这是无效的 HTML 属性 - 也不要只靠 class 加
min-height: 120px,没!important会被 layui 的内联 height 覆盖 - 若用了
lay-verifiy或lay-ignore,不影响样式覆盖逻辑,但别误以为验证配置能控制尺寸
正确写法:CSS 强制覆盖 + !important
在页面底部或自定义 CSS 文件中写:
.layui-textarea,
.layui-form textarea {
min-height: 120px !important;
height: auto !important;
/* 确保内容撑高时不会被截断 */
overflow-y: auto;
}-
min-height设你想要的最小值(如120px),这是核心 -
height: auto !important是关键:它废掉 layui 写死的内联height,让min-height有机会起作用 - 如果希望滚动条只在超长时出现,保留
overflow-y: auto;若想始终隐藏滚动条,改用overflow-y: hidden,但内容超出会不可见 - 选择器用
.layui-textarea更精准(Layui 2.8+ 默认给textarea加该类),比泛用textarea标签更安全
配合表单验证时的注意事项
当 textarea 在 form.on('submit') 中被校验,且内容为空或未达标时,Layui 会自动 focus 并添加 layui-form-danger 类——这个类本身不改高度,但如果你的 CSS 同时设置了 border-color 或 padding,可能间接影响视觉高度。
- 避免在
.layui-form-danger textarea里再写一套min-height,容易和主规则冲突 - 若需错误状态下更高一点(比如加提示文字),用
.layui-form-danger .layui-textarea单独调padding,而不是改min-height - 移动端下,iOS Safari 对
height: auto的textarea支持略弱,建议加resize: vertical允许用户手动拉伸
动态内容加载后高度失效怎么办?
比如用 layer.open 弹窗里放表单,或用 $.get 加载 HTML 片段后插入 textarea,此时 CSS 规则已存在,但 layui 可能晚于 CSS 渲染,仍会写入旧的 height 内联样式。
- 简单做法:在内容插入后,手动触发一次重绘:
layui.$('.layui-textarea').css('height', 'auto') - 更稳妥:在
success回调或layer.ready后执行layui.$('textarea').each(function(){ this.style.height = 'auto' }) - 别依赖
table.resize()—— 那是表格专用,对textarea无效
真正起效的永远是那两行:min-height: 120px !important 和 height: auto !important。其他所有操作,都是为了确保这两行能在 DOM 渲染各阶段都稳稳压过 layui 的内联样式。


















