应改.layui-input而非input,因Layui所有表单控件均显式添加该类作为样式锚点,确保覆盖动态插入的编辑态控件且避免误伤第三方组件。
直接改 .layui-input 的 border 就行,但必须加 !important,否则会被 layui 默认样式覆盖。
为什么改 .layui-input 而不是 input 或其他选择器
Layui 所有表单输入框(文本、数字、日期等)都显式加了 class="layui-input",这是它统一控制样式的锚点。只写 input 会漏掉部分动态插入的编辑态控件(比如表格里 edit: 'text' 生成的 input),也容易误伤第三方组件里的 input。
-
.layui-input是 Layui 官方约定的样式入口,稳定、可控 -
input.layui-input写法冗余,没必要——Layui 不会把layui-input类加给非表单控件 - 不要用
input[type="text"]这类属性选择器,Layui 的日期、下拉等编辑器可能用contenteditable或自定义标签,不匹配
怎么写 CSS 才真正生效
必须带 !important,且建议放在页面 <style> 标签末尾或独立 CSS 文件靠后位置,避免被 Layui 内联样式或后续加载的样式覆盖。
- 正确写法:
.layui-input { border: 1px solid #2080f0 !important; } - 错误写法:
.layui-input { border-color: #2080f0; }—— Layui 默认设了border: 1px solid #c9c9c9,只改 color 不生效 - 如果只想改聚焦时的边框,用:
.layui-input:focus { border-color: #007bff !important; outline: none; } - 注意:Layui 2.8+ 默认
box-sizing: border-box,改 border 宽度不会撑大容器;但设成3px以上可能触发横向滚动条
表格内编辑态 input 的边框为啥没变
因为表格点击编辑时,input 是动态插入到 .layui-table-view 容器下的,DOM 不在原 td 里,所以普通 .layui-input 规则可能优先级不够或作用域错位。
- 必须额外加一条:
.layui-table-view .layui-input { border: 1px solid #2080f0 !important; } - 聚焦态单独处理:
.layui-table-view .layui-input:focus { border-color: #007bff !important; } - 别写
.layui-table .layui-input—— 编辑态 input 不在.layui-table内部,这个选择器无效 - 如果用了
templet自定义编辑内容,那 input 是你写的,边框完全由你定义的 class 控制,和.layui-input无关
最易忽略的是:表格编辑态和普通表单态的 input 分属不同 DOM 位置,必须分别覆盖;还有人试图用 JS 动态加 class,其实纯 CSS 更稳、更轻量。


















