单元格编辑时边框颜色由CSS控制,非layui配置项;需用.layui-table-view input:focus,.layui-table-view select:focus{border-color:#2080f0!important;outline:none}覆盖,因编辑控件动态挂载于.table-view内。
单元格编辑时边框颜色由 CSS 控制,不是 layui 表格配置项
layui.table 本身不提供 editbordercolor 或类似配置;编辑态(即点击后出现输入框/下拉等)的边框样式完全由浏览器默认表单控件 + layui 内置 css 共同决定。你看到的蓝色边框,本质是 input:focus 或 select:focus 的 outline / border 触发的,而 layui 对这些元素做了统一接管。
直接改 .layui-table-view input:focus 的 border
最有效、最可控的方式是覆盖 layui 的编辑控件聚焦样式。注意:必须加 !important,因为 layui 内联样式或高优先级选择器会覆盖普通声明。
- 编辑文本框(
type: 'text'等):目标是.layui-table-view input - 编辑下拉(
type: 'select'):目标是.layui-table-view select - 日期、数字等其他编辑器,统一走
.layui-table-view [contenteditable]或对应组件类名
示例 CSS(放入页面 <style> 或全局 CSS 文件):
.layui-table-view input:focus,
.layui-table-view select:focus,
.layui-table-view textarea:focus {
border-color: #2080f0 !important;
outline: none;
}
⚠️ 不要只写 border,而应明确写 border-color —— layui 默认用了 border: 1px solid #c9c9c9,只改 color 才能精准替换,不影响粗细和样式。
为什么用 .layui-table-view 而不是 .layui-table?
因为 layui 编辑态控件(如 input)被插入在 .layui-table-view 容器内,而非原始 td 中;直接对 td input 写样式容易失效——编辑控件是动态创建并 append 到 body 或 table-view 下的浮层节点,DOM 位置不在表格单元格内部。
-
.layui-table是表格结构容器,不包含编辑态 DOM -
.layui-table-view是 layui 封装的“视图根节点”,所有编辑浮层、下拉菜单、日期面板都挂载于此 - 漏掉这个前缀,样式大概率不生效
编辑态边框变粗或圆角异常?检查是否被其他框架污染
如果你项目里同时引入了 Bootstrap、Element UI 或自定义 reset.css,它们常带全局 input:focus 规则(比如 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25)),会和 layui 的 border 叠加,造成视觉错乱。
- 打开浏览器开发者工具,选中编辑中的 input,看 computed 样式里
border和box-shadow是否共存 - 若存在干扰
box-shadow,一并清掉:box-shadow: none !important; - 圆角不一致?补上
border-radius: 2px !important;(layui 默认值)
真正麻烦的点在于:编辑态 DOM 是运行时动态挂载的,样式必须提前注入且足够强力;任何依赖 JS 动态 addClass 或操作 style 的方式,在编辑触发瞬间都来不及生效。所以,纯 CSS 覆盖是唯一稳定路径。


















