前端键盘焦点样式与 :focus-visible 的应用

我在给按钮补设计稿时，最容易忽略的细节不是圆角，而是焦点环：鼠标点一下按钮时，默认描边有时显得突兀；但用 Tab 键移动时，如果焦点环又消失，键盘用户就不知道自己当前停在哪里。解决这个矛盾的关键是把焦点状态和“是否需要明显提示”分开，用 :focus-visible 做键盘优先的样式入口。

参考地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible

这篇只讨论焦点可见性，以及鼠标和键盘输入下的样式差异。下面的代码可以直接放进组件样式中；图示均为静态结构说明图，不是浏览器截图或运行证据。

我先把 :focus 和 :focus-visible 分开看

:focus 只表示元素当前获得了焦点，不管焦点是鼠标点击、键盘 Tab，还是脚本调用 focus() 得到的。:focus-visible 仍然要求元素处于焦点状态，但是否匹配还会参考浏览器对输入方式的判断。通常，键盘导航更需要焦点环，鼠标点击则可能不需要额外强调。

这里的“通常”很重要，因为最终判断由用户代理的启发式规则决定，不应把某一个浏览器的鼠标行为写成永久保证。无论如何，不要用全局 *:focus { outline: none; } 直接抹掉焦点样式；这会让视力正常但依赖键盘导航的用户失去定位线索。

用 :focus-visible 定制键盘焦点环

我更愿意先写一个清晰、可见、不会挤动布局的焦点样式，再让浏览器决定它何时出现。outline 不参与盒模型，配合 outline-offset 可以把提示线与控件边缘拉开；颜色和粗细要与背景有足够对比度。

.action,
.field {
  border-radius: 6px;
}

/* 只在浏览器判断需要明显提示时增强焦点环。 */
.action:focus-visible,
.field:focus-visible {
  outline: 3px solid #145dff;
  outline-offset: 3px;
}

/* 让鼠标点击不额外制造一圈装饰，但不改写键盘焦点。 */
.action:focus:not(:focus-visible),
.field:focus:not(:focus-visible) {
  outline: none;
}

这段写法的重点不是“隐藏鼠标焦点”，而是只在同一元素同时满足 :focus、却不满足 :focus-visible 时取消额外装饰。原生控件本身的交互语义仍然存在，键盘 Tab 进入时会重新匹配 :focus-visible。

给旧环境加一个有限回退

如果项目需要照顾不支持 :focus-visible 的旧浏览器，可以把回退限制在特性查询中。这样新浏览器走精确的选择器，旧浏览器仍然通过 :focus 保留可见提示；没有必要为了回退而删除现代规则。

.action:focus-visible {
  /* 新环境使用键盘友好的高对比度焦点环。 */
  outline: 3px solid #145dff;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .action:focus {
    /* 旧环境保留焦点提示，避免键盘用户无从定位。 */
    outline: 3px solid #145dff;
    outline-offset: 3px;
  }
}

如果完全不写 :focus 回退，老环境通常仍可能显示原生 outline，但不同控件的视觉效果未必统一。回退规则应当尽量短，只解决可见性，不要把旧浏览器分支扩展成另一套组件主题。

放进真实组件时，我会检查这四个点

• 按钮和链接：保留原生语义，先用 Tab 走一遍，确认每个可操作元素都有可辨认的当前状态。
• 表单输入：输入框需要持续可见的焦点线，不能因为鼠标点击规则而让正在输入的字段失去提示。
• 脚本移动焦点：弹窗打开后如果用 focus() 把焦点放到标题或关闭按钮，要确认该位置仍有足够的视觉反馈。
• 对比度与布局：焦点环不能只靠颜色，避免被裁切，也不要用改变边框宽度的写法让页面跳动。

我自己的取舍是：组件默认采用 :focus-visible 做增强，绝不全局移除原生焦点；只有在确实需要统一旧环境表现时才添加有限回退。这样鼠标体验更干净，键盘体验也不会被设计稿牺牲。

相关问题

问：能不能只写 :focus-visible，不写 :focus？
可以，现代浏览器会按用户代理规则决定何时显示；但若要覆盖旧环境，最好按上面的 @supports 方式提供回退。

问：为什么鼠标点击按钮时有时仍会看到焦点环？
:focus-visible 的匹配由浏览器启发式判断，不能把鼠标行为当成绝对开关；如果控件仍需要持续提醒，保留焦点提示反而更合适。

问：焦点环颜色应该怎么选？
先保证与邻近背景有明显对比，再检查高亮线不会被容器裁切；不要只依赖颜色变化，必要时同时使用粗细、偏移或形状差异。