应禁用默认 outline 但需保留可访问性焦点指示：input:focus { outline: none; border: 2px solid #007bff; }，同时 ios 需加 -webkit-tap-highlight-color: transparent。
点击输入框出现蓝色/紫色发光边框怎么关
这是浏览器默认的 outline 样式在聚焦（:focus）时触发的，尤其在 Chrome、Edge 和 Safari 上明显。不处理的话，用户点一下就弹出一圈难看的高亮，和自定义 UI 冲突。
直接清掉 outline 最快：
input:focus { outline: none; }
但别只写这一句——它只是“藏起来”，没解决底层交互反馈缺失的问题。用户（尤其键盘操作者）会失去焦点位置感知，可访问性下降。
- 必须配合
border或box-shadow手动补一个视觉焦点态，比如加个 2px 的border-color: #007bff - 如果用了
outline: 0，注意部分旧版 IE 可能不识别，outline: none兼容性更稳 - 别在全局重置所有
:focus，只针对input、textarea、button这类可交互元素
Safari iOS 点击输入框闪一下灰色蒙层怎么办
那是 Safari 移动端的点击高亮反馈，由 -webkit-tap-highlight-color 控制，默认是半透明灰色。它和 outline 无关，也不响应 :focus，而是在手指按下瞬间触发。
关掉它只需一行：
input { -webkit-tap-highlight-color: transparent; }
- 值必须是
transparent，写none无效 - 这个属性只在 iOS Safari 和部分安卓 WebView 里生效，桌面浏览器忽略
- 设为
transparent后，iOS 上长按复制菜单仍可用，不影响功能 - 如果同时用了
user-select: none，可能干扰文本选择，慎用
outline: none 之后 Tab 键跳转看不见焦点了
这就是前面说的“隐藏不等于消除”的典型后果。键盘用户靠 Tab 导航，没了视觉焦点，等于把他们扔进黑盒。
补救的关键是：用 outline 以外的方式提供同等明确的焦点指示。
- 优先改
border：比如input:focus { border: 2px solid #007bff; }，比阴影更清晰 - 如果边框已固定样式，用
box-shadow更安全，例如box-shadow: 0 0 0 2px rgba(0,123,255,.25); - 别只给
input加，textarea、select、自定义组件里的tabindex="0"元素也得同步处理 - 测试时真用键盘
Tab走一遍，别只靠鼠标点
为什么有时候 outline 消不掉，还是有残留光晕
常见原因是父容器或全局 CSS 里有更高级别的样式覆盖，或者用了 !important 却没配对清除。
排查顺序很实际：
- 打开开发者工具，选中输入框，看
:focus状态下outline是否被其他规则（比如 Bootstrap 的.form-control:focus）重新设回 - 检查是否漏写了伪类，比如只写了
input { outline: none; }，但没加:focus - 某些 UI 库（如 Ant Design）会用
outline-offset推开外边距，导致看起来像还有光，此时要一并设outline-offset: 0 - 极少数情况是浏览器渲染缓存，强制刷新（
Cmd+Shift+R）再试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
