Layui如何修改表格内单元格编辑时边框的颜色-Layui教程-PHP中文网

单元格编辑时边框颜色由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></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框架模板-AdminPro

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

下载

为什么用 `.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 叠加，造成视觉错乱。