outline: none 不总是生效因浏览器原生样式优先级高或含!important，且移除会损害可访问性；应改用自定义 outline 替代并确保键盘用户可见焦点。
为什么 outline: none 不总是生效？
直接写 input:focus { outline: none; } 在某些浏览器（尤其是 Chrome/Edge）中可能无效，因为原生表单控件的焦点样式有更高优先级，或被用户代理样式表中的 !important 覆盖。更关键的是，单纯移除 outline 会损害可访问性——键盘用户将无法感知当前聚焦位置。
推荐做法：用 outline 替换而非删除
保留视觉反馈，但按设计规范重定义样式。常见安全替换方式：
-
input:focus { outline: 2px solid #007bff; outline-offset: 2px; }—— 显式指定颜色、粗细和偏移，避免遮挡边框 - 对
button、select、textarea等同样需单独设置，不能只写input - 若使用 CSS 重置库（如 Normalize.css），注意它可能已设置了
outline: 1px dotted #ccc，需针对性覆盖
需要特别处理的 Safari 表单控件
Safari 对 input[type="number"]、input[type="search"] 和 textarea 的 focus outline 有额外渲染逻辑，仅靠 outline 可能不彻底：
- 加
-webkit-appearance: none;可解除部分原生样式绑定（但会丢失默认微调按钮等） - 对
input[type="search"]，还需覆盖::-webkit-search-cancel-button和::-webkit-search-decoration - 务必测试
tab键导航下焦点是否可见、是否与设计稿一致
可访问性红线：别在全局禁用 :focus
用 *:focus { outline: none; } 或类似通配写法是高危操作。真实项目中必须：
- 仅对明确有替代焦点指示（如高亮边框、背景色变化、阴影）的元素移除默认
outline - 确保所有交互控件在键盘聚焦时有至少 3:1 的对比度，并满足 WCAG 2.4.7（焦点可见）要求
- 开发阶段用浏览器「键盘导航」模式（Windows:
Tab/ macOS:Ctrl + F7）手动验证
真正难的不是删掉那条 outline: none，而是确认删掉之后，谁还能知道光标在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
