layui文本域怎么移除layui-textarea样式-Layui教程-PHP中文网

layui 的 textarea 默认样式来自 layui-form-item 容器与 textarea 元素选择器的组合规则，而非 layui-textarea 类；移除需通过高优先级 css 覆盖 padding、border 等属性，并注意渲染时机与 dom 结构。

layui文本域怎么移除layui-textarea样式

layui-textarea 的默认样式从哪来

Layui 的 textarea 并没有单独的 layui-textarea 类名——这是个常见误解。你看到的“Layui 文本域样式”，实际是 layui-form-item 容器 + textarea 元素 + Layui 内部 CSS 规则共同作用的结果，比如内边距、圆角、边框色、字体继承等。所谓“移除 layui-textarea 样式”，本质是绕过或覆盖这些默认规则。

直接去掉 layui 渲染后的 class 不起作用

很多人尝试用 JS 删除 textarea 上的 layui-textarea（其实这个类压根不会自动加），或者手动清掉 class 属性，结果发现样式还在。原因很直接：

Layui 不给 textarea 添加额外 class，它靠父级 layui-form-item 和元素选择器 textarea 控制样式
即使你删了所有 class，浏览器用户代理样式 + Layui 的 textarea 通用规则（如 padding: 10px）依然生效
用 layui.form.render() 后，Layui 可能会重写 DOM 结构（比如包一层 div.layui-form-text），手动删 class 很容易被覆盖

真正有效的移除方式：CSS 层级覆盖

必须用更高优先级的 CSS 覆盖 Layui 的原始规则，重点盯住这几个属性：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

textarea 本身：清除 padding、border、border-radius、outline、resize
父容器 .layui-form-text（Layui 自动包裹的外层）：设 margin: 0、line-height: normal，防止高度撑开
如果用了 lay-verType="tips" 等验证提示，错误状态下的红边来自 .layui-form-danger textarea，需单独覆盖

示例最小化重置：

/* 必须加 !important，因为 Layui CSS 权重高 */
.layui-form-text textarea {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  resize: none !important;
  font: inherit !important;
}
.layui-form-text {
  margin: 0 !important;
}