readonly input点击后出现蓝色边框是因浏览器允许其聚焦，layui的outline:0未覆盖所有状态；需加tabindex="-1"阻止键盘聚焦，并用!important重置:focus和:focus-visible的outline与box-shadow。
layui 中只读 input 点击后出现蓝色边框是什么原因
这是浏览器原生的 :focus 样式，加上 layui 默认对 .layui-input 有 outline: 0 但没覆盖所有状态。当 readonly 的 input 被点击（尤其是用鼠标点），部分浏览器（Chrome / Edge）仍会触发 focus，从而显示默认焦点环——表现为蓝色边框或阴影。
怎么彻底禁用 readonly input 的 focus 边框
核心是两步：确保它不获取焦点 + 覆盖所有可能触发 focus 样式的 CSS 状态。layui 自身不提供开关，得手动干预：
- 给 input 加上
tabindex="-1"，阻止键盘聚焦（不影响鼠标点击，但能避免意外 focus） - 在 CSS 中同时重置
:focus和:focus-visible（后者是现代浏览器区分鼠标/键盘聚焦的新标准） - 注意：不要只写
outline: none，要加!important，因为 layui 的样式权重较高
.layui-form input[readonly] {
outline: none !important;
}
.layui-form input[readonly]:focus,
.layui-form input[readonly]:focus-visible {
outline: none !important;
box-shadow: none !important;
}
为什么加了 readonly 还能被 focus
HTML 规范允许 readonly 元素接收焦点（方便用户复制内容），它和 disabled 不同：disabled 既不可编辑也不可聚焦，而 readonly 可聚焦、可选中、可复制。所以仅靠属性无法阻止 focus 边框。
- 若业务允许，改用
disabled是最省事的方案（但表单提交时该字段值不会被发送） - 若必须用
readonly（比如需要提交值），就得靠上面的 CSS +tabindex组合 - 某些版本 layui 在
layui.form.render()后会动态加 class，建议把自定义 CSS 放在 layui CSS 之后，或用body .layui-form input[readonly]提高优先级
移动端点击仍有微弱高亮怎么办
iOS Safari 和部分安卓浏览器对可聚焦元素有额外的点击高亮（灰色半透明 overlay），这和 focus 边框无关，而是 -webkit-tap-highlight-color：
.layui-form input[readonly] {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
}
这个属性只对支持触摸的设备生效，不影响桌面端。如果项目需兼容老版 iOS（-webkit- 前缀。
真正容易被忽略的是：CSS 里只写了 :focus 却漏了 :focus-visible，或者没加 !important 导致被 layui 的 inline style 或后续 JS 注入样式覆盖。调试时用浏览器 DevTools 检查 computed styles，确认 outline 和 box-shadow 确实为 none。
