应保留可访问性，用outline: none配合border-color或box-shadow替代默认蓝色边框；禁用-webkit-tap-highlight-color和-webkit-appearance处理ios safari蒙层；避免全局清除outline。
input聚焦时的蓝色边框是什么
那是浏览器默认的 outline 样式，属于可访问性设计的一部分——键盘用户按 Tab 键导航时靠它识别当前焦点。直接删掉会影响无障碍体验，但很多 UI 设计要求视觉上“去掉”，实际应替换成更可控的样式。
用 CSS 移除或替换 outline
最稳妥的做法不是清空 outline，而是重置为 none 并用 border 或 box-shadow 模拟聚焦效果：
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
-
outline: none是关键，但单独用会丢失焦点指示，必须配合其他视觉反馈 - 别只写
outline: 0，部分旧版 Safari 不识别，none兼容性更好 - 如果项目强制要求完全无边框（含鼠标点击），需加
:active状态处理
为什么不能全局重置所有 input 的 outline
全局写 input { outline: none; } 会破坏键盘导航体验，尤其对屏幕阅读器用户不友好。Chrome 和 Firefox 在开发者工具里会警告 “Outline is removed but no alternative focus style is provided”。
- 仅对特定 class（如
.no-outline）应用outline: none - 若用框架（React/Vue），确保自定义组件也透传
tabIndex和焦点逻辑 - 测试方式：不碰鼠标，纯用 Tab 键切换，确认每个可交互 input 都有清晰视觉反馈
移动端 Safari 的额外问题
iOS Safari 默认给 input 加一层半透明蓝色高亮（不是 outline），即使设了 outline: none 也还在。必须加：
input {
-webkit-appearance: none;
}
input:focus {
-webkit-tap-highlight-color: transparent;
}
-
-webkit-tap-highlight-color控制点击时的灰色/蓝色蒙层 -
-webkit-appearance: none防止系统渲染原生样式干扰 - 这两个属性只在 WebKit 内核生效，不影响其他浏览器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
