只写 border: none 仍有蓝色边框，是因为浏览器在 :focus 状态下默认添加了 outline（焦点轮廓），它独立于 border、不占布局空间；必须同时处理 outline 并提供可访问的替代焦点样式，如 box-shadow 或实线边框，且 iOS 需额外设置 -webkit-tap-highlight-color: transparent。

为什么只写 border: none 还有蓝色边框？

因为浏览器默认给 input 的 :focus 状态加了 outline，它和 border 是两套独立机制：前者是焦点指示器，不占布局空间；后者才是元素自身的边框线。你看到的“点击后出现的蓝线”，大概率是 outline，不是 border。

常见错误现象包括：

• 写了 border: none，但鼠标点进去还是有蓝边
• 用了 outline: 0，在旧版 Safari 里没生效（应改用 outline: none）
• 全局写 input { outline: none; }，导致键盘用户按 Tab 键时完全看不到焦点在哪

outline: none 必须搭配替代样式才安全

直接删掉 outline 是反模式。WCAG 要求焦点必须有清晰、高对比的视觉反馈，否则键盘用户无法操作。Chrome 和 Firefox 开发者工具会明确警告：“Outline is removed but no alternative focus style is provided”。

推荐做法是用 box-shadow 替代：

立即学习“前端免费学习笔记（深入）”；

• outline: none;
• box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);（颜色需满足 ≥ 3:1 对比度）
• 或更稳妥的实线：outline: 2px solid #007bff;（保留 outline 语义，仅改样式）

别用 border-color 单独变化——它在部分缩放/高对比模式下可能不可见。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

移动端 Safari 的隐藏蓝蒙层怎么处理？

iOS Safari 在点击 input 时会叠加一层半透明蓝色高亮（-webkit-tap-highlight-color），这不是 outline，也不是 border，设了 outline: none 完全无效。

必须加这两条 WebKit 专属规则：

• -webkit-appearance: none;（接管原生渲染逻辑，否则内边距/圆角/边框都由系统控制）
• -webkit-tap-highlight-color: transparent;（干掉点击蒙层）

注意：这两个属性只对 WebKit 内核生效，不影响其他浏览器，也不需要加前缀兼容性处理。

框架项目里为什么样式不生效？

React/Vue 组件中，input 常被封装成自定义组件，CSS 作用域或优先级容易出问题。常见原因：

• UI 框架（如 Bootstrap、Ant Design）设置了更高优先级的 border 或 box-shadow，你的规则被覆盖
• 组件未透传 tabIndex 或原生 focus 事件，导致 :focus 伪类根本不会触发
• 用了 input:not([type="hidden"]) { ... } 这类精准选择器，但忘了匹配 type="search" 或 type="number" 等特殊类型

调试建议：打开开发者工具，选中元素，看 :focus 状态下哪些样式被划掉、哪些生效；检查 computed 样式里 outline 和 border 的最终值。

真正难的不是让蓝线消失，而是确保它消失之后，有人仍能靠键盘准确知道光标停在哪——这个点藏在 :focus 后面，不报错、不警告，但一上线就被无障碍测试卡住。