layui文本域怎么设置禁用状态下的背景色-Layui教程-PHP中文网

必须显式定义 textarea:disabled 样式，因 layui 未封装且无默认禁用规则；需单独写 css 控制背景、文字色、光标、拖拽等，并注意选择器权重与表单容器样式覆盖问题。

layui文本域怎么设置禁用状态下的背景色

textarea:disabled 伪类必须配合 CSS 显式定义

Layui 对 textarea 不做额外封装，禁用状态完全走原生行为，但默认样式不明显——灰色背景、文字变浅、光标消失这些视觉反馈全靠浏览器默认，一致性差。你看到的“没变化”其实是没写 :disabled 样式。

必须在 CSS 中单独声明 textarea:disabled，不能复用 input:disabled 或依赖 layui 全局样式。Layui 的 CSS 文件里压根没给 textarea 写禁用态规则。

直接加 disabled 属性即可触发禁用：<textarea name="remark" disabled></textarea>

必须配套写 CSS，例如：

textarea:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

若用了 layui-form-textarea 类（比如在 form 表单中），建议加更具体的选择器避免被覆盖：
```
.layui-form-textarea textarea:disabled {
  background-color: #f9f9f9;
  border-color: #e6e6e6;
}
```

动态禁用 textarea 后样式不生效？检查是否漏了重绘或 JS 干扰

用 JS 动态设置 disabled（如 $("textarea").prop("disabled", true)）后，样式没变，常见原因不是 JS 没生效，而是：

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

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

下载

CSS 选择器权重不够，被 layui 默认样式或 inline style 覆盖；加 !important 临时验证（上线前应优化选择器）
页面有其他脚本在禁用后又手动设置了 style.background，覆盖了 CSS 规则；用开发者工具检查 computed style，看 background-color 最终来源
用了 layui.form.render() —— 这个函数对 textarea 无效，它只处理 select、checkbox、radio 等 layui 封装组件，textarea 是纯原生，不需要也不响应 render

禁用状态下文字颜色和背景色要协调，别只调一个

只改 background-color 很容易导致文字看不清。禁用态下 color 通常比正常态更灰，且部分浏览器会强制降低对比度。实测中这几个组合比较稳：

background-color: #f8f8f8 + color: #777（柔和灰，适合多数主题）
background-color: #f0f0f0 + color: #666（稍深，高对比）
如果页面主色调偏蓝，可用 background-color: #edf4ff + color: #4a6fa5，保持色系统一
避免用纯白 #fff 配浅灰文字（如 #ccc），对比度不足，可访问性不达标

textarea 禁用后仍可拖拽滚动？这是浏览器默认行为，需额外控制

禁用的 textarea 在 Chrome/Firefox 中仍允许拖动滚动条、选中文本（只是不能输入），这会让用户误以为还能编辑。这不是 bug，是规范行为，但体验上不合理。

加 CSS 锁定交互：

textarea:disabled {
  resize: none;
  user-select: none;
  -webkit-user-select: none;
}

如果想彻底禁用滚动，可加 overflow: hidden，但注意内容截断风险；更稳妥的是确保内容高度适配，不出现滚动条
别试图用 JS 监听 mousedown 或 selectstart 来阻止——禁用元素本就不该响应这些事件，靠 CSS 控制更干净

真正容易被忽略的点：Layui 表单容器（如 .layui-form-item）有时会给 textarea 加内边距或边框，禁用时这些样式不会自动弱化。你需要把禁用样式写到最具体的层级，比如 .layui-form-item textarea:disabled，否则视觉上依然“太醒目”。