只写 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 单独变化——它在部分缩放/高对比模式下可能不可见。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端 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 后面，不报错、不警告，但一上线就被无障碍测试卡住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
