使用css `focus-visible` 改善用户体验

昔人'2025-10-20 8:20

focus-visible 是一个非常有用的 CSS 伪类，它解决了 Web 可访问性中的一个重要问题
:focus-visible 用于在特定情况下为元素添加焦点样式，而不是像 :focus 那样总是显示焦点环。

css 复制代码

/* 传统 :focus - 总是显示 */
button:focus {
  outline: 2px solid blue;
}

/* 现代 :focus-visible - 智能显示 */
button:focus-visible {
  outline: 2px solid blue;
}

css 复制代码

/* 最佳实践：同时使用 :focus 和 :focus-visible */
.button {
  /* 基础样式 */
}

/* 为不支持 :focus-visible 的浏览器提供基础焦点样式 */
.button:focus {
  outline: 2px solid blue;
}

/* 为现代浏览器提供智能焦点样式 */
.button:focus:not(:focus-visible) {
  outline: none; /* 移除不必要的焦点样式 */
}

.button:focus-visible {
  outline: 2px solid blue;
  /* 可以添加更丰富的焦点样式 */
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

使用场景建议

适合使用 :focus-visible

按钮、链接等交互元素

导航菜单

表单控件

自定义组件

可能需要使用 :focus

需要始终显示焦点的特殊组件

模态对话框中的焦点管理

自定义键盘导航系统
See the Pen 使用 :focus-visible 改善用户体验 by liu874396180 ( @liu874396180) on CodePen.