layui搜索框背景色改不了是因为其样式被高优先级规则覆盖且存在focus/disabled等多状态干扰；需用!important同时覆盖.layui-input、:focus和:disabled三类选择器，并注意lay-search渲染后外层容器的影响。
layui搜索框背景色为什么改不了？
直接给 <input type="text" class="layui-input"> 加 background-color 通常无效——因为 Layui 会用 .layui-input 的默认样式覆盖，且某些版本还会在 focus 状态下强制重置背景。更关键的是：Layui 的搜索框常配合 lay-search 属性或 form.render() 渲染，原始 input 已被包裹进带样式的容器中，单纯改 input 样式作用域太窄。
正确方式：覆盖 .layui-input + 处理 focus 和 disabled 状态
必须同时处理三种状态，否则会出现「输入时变白」「禁用时还原默认灰」等不一致现象：
- 基础背景：
.layui-input { background-color: #f0f9ff !important; } - 聚焦态（用户点击后）：
.layui-input:focus { background-color: #e6f7ff !important; border-color: #4096ff !important; } - 禁用态：
.layui-input[disabled], .layui-input:disabled { background-color: #f5f5f5 !important; cursor: not-allowed; }
注意：所有规则必须加 !important，否则会被 Layui 内联的 style 或高优先级选择器压制。
如果用了 lay-search 搜索按钮，还要单独调顶部容器
当 <input lay-search> 被渲染后，Layui 会生成一个外层 <div class="layui-input-inline"> 包裹它，并可能添加 <code>.layui-search 类。此时若发现左右边距发白或边框不连贯，需额外控制：
-
.layui-search .layui-input { padding-left: 30px; }（避免文字被搜索图标遮挡） -
.layui-search { background-color: transparent; }（防止外层容器盖住 input 背景） - 如需整体圆角+阴影，建议改
.layui-input-inline而非 input 本身，避免与内部元素错位
动态切换背景色（比如根据搜索关键词长度）
不能靠 class 切换再写一堆 CSS，应直接操作 DOM 样式并兼顾状态还原：
- 监听
input事件：document.querySelector('input[lay-search]').addEventListener('input', function() { ... }) - 根据
this.value.length设置背景：this.style.backgroundColor = this.value.length > 0 ? '#e6f7ff' : '#f0f9ff'; - 但必须同步处理 focus 状态：手动补一句
this.style.borderColor = '#4096ff';，否则失去焦点后边框颜色不恢复 - 慎用
!important内联样式——它会阻断 CSS 中的:focus规则，推荐用 class 切换 + 预设好所有状态的 CSS
最易忽略的是 disabled 态和 focus 态的样式断层，一不留神就出现「输入时背景突变」「清空后边框消失」这类视觉跳变。
