layui文本域边框颜色需通过css覆盖.layui-textarea > textarea的border属性实现,推荐写法为.layui-textarea > textarea { border: 2px solid #009688 !important; },并确保样式在layui.css之后加载且加!important以避免被内联样式覆盖。

layui文本域边框颜色在哪改
layui 的 textarea 边框不是靠表单配置项控制的,而是由 CSS 类 .layui-textarea 和其内部 textarea 元素样式共同决定。你调用 form.render('textarea') 或设置 lay-skin 都不会改变边框——这些只影响 checkbox、radio、select 等组件,textarea 没有皮肤参数。
直接覆盖 .layui-textarea textarea 的 border
最稳妥的方式是写一条高优先级 CSS 规则,精准作用于渲染后的 textarea 元素:
- 必须加
!important:layui 内部会为.layui-textarea容器设border: 1px solid #e6e6e6,且部分版本还带内联样式 - 选择器要具体:推荐用
.layui-textarea > textarea,避免污染全局textarea - 别只改
border-color:建议连同border-width和border-style一起写,防止继承冲突
例如:
.layui-textarea > textarea {
border: 2px solid #009688 !important;
}
为什么 form.render() 后样式失效
常见现象:CSS 写对了,但页面加载后仍是默认灰边;或第一次渲染正常,form.render('textarea') 之后又变回去了。这是因为:
-
form.render()会重新生成 DOM 结构,但不会重载你写的自定义 CSS - 如果自定义样式在
layui.css之前加载,会被覆盖;必须确保它在前或动态插入到<style></style>标签末尾 - 某些项目用了 scoped CSS(如 Vue 单文件组件),导致样式无法穿透到
.layui-textarea内部
想只改某一个文本域的边框
给容器加自定义 class 是唯一可靠方式:
- HTML 中:
<div class="my-textarea-wrap"><textarea name="remark"></textarea></div> - CSS 中:
.my-textarea-wrap .layui-textarea > textarea { border: 2px solid #ff5722 !important; } - 渲染时指定该容器:
form.render('textarea', '.my-textarea-wrap');(可选,仅用于触发美化)
注意:不要依赖 lay-key 或 id 直接选中,因为 layui 会在外部包裹一层 .layui-textarea,原始 textarea 已不在顶层 DOM。











