:focus 伪类必须显式声明才能覆盖浏览器默认焦点虚线框，button { outline: none } 无效；firefox 需重置 ::-moz-focus-inner；ie6/7 不支持需 js 或属性 fallback；移除 outline 必须提供可感知的替代焦点样式。
button:focus { outline: none } 为什么写了却没用
直接写 button { outline: none } 不生效，是因为虚线框是浏览器在元素获得焦点时渲染的默认样式，它绑定在 :focus 状态上，不是常态样式。你必须显式覆盖该状态。
常见错误包括：
- 只写
button { outline: none }，漏掉:focus - 选择器优先级被框架（如 Bootstrap、Ant Design）的 CSS 覆盖，尤其当它们用了
!important - 把样式加在父容器上，而实际聚焦的是
button自身
稳妥写法是：button:focus, input[type="button"]:focus, input[type="submit"]:focus { outline: none; }
Firefox 下按钮仍有 1px 偏移或“跳动”
Firefox 会给 button 和 input[type="button"] 插入一个隐藏伪元素 ::-moz-focus-inner，它自带默认 border 和 padding，即使 outline: none 也压不住视觉错位。
必须单独重置：
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border: 0;
padding: 0;
}
这个规则只对 Firefox 生效，不影响其他浏览器，可放心加入全局 reset。
IE6/7 兼容方案不能只靠 CSS
IE6/7 根本不支持 :focus 伪类（除 a 外），也不识别 outline。纯 CSS 在这些浏览器里必然失效。
可用的 fallback 方案有：
- HTML 属性：
<button hidefocus="true">提交</button> - JS 批量处理：
document.querySelectorAll('button, input[type="button"]').forEach(el => el.hideFocus = true); - 慎用内联 JS：
<button onfocus="this.blur()"></button>—— 会破坏键盘导航，且禁用 JS 时失效
注意：现代项目若已放弃 IE6/7 支持，这部分可直接删除，避免冗余逻辑。
去掉虚线框后键盘用户就“瞎了”
移除 outline 最大风险不是样式出错，而是让依赖 Tab 键导航的用户完全无法判断当前聚焦位置——这违反 WCAG 2.1，也是很多无障碍审计的扣分项。
替代焦点样式必须满足：
- 视觉明显：比如
outline: 2px solid #007bff+outline-offset: 2px - 与 hover 保持一致反馈，避免仅 focus 时突兀出现
- 避免全站写
*:focus { outline: none }—— 它会干掉所有表单控件的焦点提示
真正难的不是“怎么去掉”，而是“去掉之后，怎么让焦点依然可感知”。这点常被忽略，直到上线后收到无障碍投诉才补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
