输入框边框由 .layui-input 的 CSS 控制，与表格边框无关；应通过 .layui-table .layui-input { border: 1px solid #007bff !important; } 覆盖样式，注意前缀、优先级及版本兼容性。
点击编辑后输入框边框来自哪里
单元格开启 edit: 'text' 后出现的输入框，是 layui 内部动态插入的 <input type="text" class="layui-input">，它的边框样式完全由 .layui-input 的 css 控制，和表格本身的 .layui-table 边框无关。你改表格边框（比如 .layui-table td）对这个输入框没影响。
直接覆盖 .layui-input 的 border 样式
最简单有效的方式，是在你的页面 CSS 中加一条规则，优先级要高于 Layui 默认样式（建议加 !important 防冲突）：
.layui-table .layui-input {
border: 1px solid #007bff !important;
border-radius: 2px !important;
}
注意几点：
- 必须带
.layui-table前缀，否则可能影响全局所有.layui-input（比如表单里的） - 如果只想改某列的编辑框，可以结合列的
field加自定义 class，再在 CSS 里写更细粒度的选择器 - Layui 2.8+ 默认用了
box-sizing: border-box，改 border 宽度不会撑大单元格，但太粗（如3px）仍可能触发横向滚动条
用 templet 自定义输入框时如何控制边框
如果你不用 edit: 'text'，而是用 templet 手动返回 <input>，那边框就完全由你写的 HTML 和 CSS 决定：
{field: 'price', title: '价格', templet: function(d){
return '<input type="number" value="' + (d.price || 0) + '" class="my-price-input">';
}}
然后配 CSS：
.my-price-input {
border: 2px dashed #6c757d;
padding: 4px 8px;
width: 100%;
box-sizing: border-box;
}
这种写法更灵活，但要注意：
- 必须手动处理焦点、回车提交、失焦保存等交互逻辑
- 别忘了调用
form.render('number')或form.render('text')让 Layui 感知新控件 - 如果用了
lay-verify，要确保 input 上有对应 name 属性，否则验证不触发
容易被忽略的兼容性细节
不同 Layui 版本对编辑框的渲染方式略有差异：
- Layui elem.find('input').focus()
- Layui 2.7–2.8：
.layui-input默认border-color: #e6e6e6，深色主题下可能看不清，建议显式设border-color - Layui 2.8+：支持
input[type=number]的原生上下箭头样式，但某些浏览器（如 Firefox）会默认加 outline，需要额外重置outline: none
真正难调的不是边框本身，而是编辑态和非编辑态之间视觉一致性——比如 hover 背景色、字体大小、padding 对齐，这些一旦不统一，用户会觉得“这个框突兀”。建议把编辑框样式和非编辑单元格的 line-height、padding 一并对齐。
