layui搜索框边框来自.layui-input容器的内联样式，需用!important覆盖border和box-shadow；表格与表单搜索框需分别限定选择器；去边框后须补足:focus状态和视觉反馈。
layui搜索框的边框到底来自哪一层
不是 input 自身的 border 或 outline，而是 Layui 渲染后给 .layui-input 容器加的内联边框样式（如 style="border: 1px solid #e6e6e6 !important"）。直接改 input 标签的 border 或 outline 完全无效——容器层已经把样式写死并带 !important。
清掉边框必须覆盖 .layui-input 的内联样式
在你的 CSS 文件末尾或 <style></style> 标签中加入以下规则，确保它加载在 layui.css 之后：
.layui-input {
border: none !important;
box-shadow: none !important;
}
- 只写
border: none不够：Layui 2.8+ 默认还加了box-shadow: 0 1px 2px rgba(0,0,0,.05)，会残留一道灰影 - 必须加
!important：Layui 动态注入的内联样式权重极高，不加会被覆盖 - 如果用了
skin="line"等主题，还要额外检查是否被皮肤样式二次叠加
表格搜索框、表单搜索框要分别处理
表格顶部的搜索输入框（.layui-table-tool .layui-input）和普通表单里的（.layui-form .layui-input）是不同上下文，CSS 选择器需明确限定：
.layui-table-tool .layui-input,
.layui-form .layui-input {
border: none !important;
box-shadow: none !important;
}
- 没限定作用域会导致全局
.layui-input都变无边框，可能影响日期、下拉等其他组件的视觉一致性 - 表格工具栏里的搜索框常被忽略，DOM 路径是
.layui-table-tool > .layui-form > .layui-input，建议用开发者工具精准定位 - 若搜索框是动态渲染（比如
table.render()后插入），CSS 必须提前就位，否则会“闪现”一次有边框状态
去掉边框后要注意的两个实际问题
视觉扁平化容易，但交互反馈不能丢：
- 输入框失去边框后，用户可能无法快速识别可编辑区域。建议加
background-color: #fafafa或微调padding提升可感知性 - 聚焦态（
:focus）必须重新定义，否则键盘用户 tab 到该输入框时将完全看不到焦点位置。例如：.layui-input:focus { border: 1px solid #009688; outline: none; } - 移动端 Safari 在高 DPI 屏幕上，即使清了
border和box-shadow，也可能因background-clip: padding-box渲染出像素级灰边——这不是 bug，是浏览器合成策略，加transform: translateZ(0)可缓解
