:focus-visible

当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时,:focus-visible 伪类将生效。

这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

请注意Firefox通过较旧的前缀伪类 :-moz-focusring 支持类似的功能。更多细节请参考:-moz-focusring (en-US)页面。

语法

:focus-visible

示例

基本示例

在这个例子中,:focus-visible 选择器利用客户端(UA)的行为决定是否匹配。比较一下,当你用鼠标点击控件和用键盘tab切换控件有何不同。请注意元素的表现与具有 :focus 样式的元素的区别。

<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

选择性地显示焦点

自定义控件,比如按钮自定义元素,可以使用 :focus-visible 使其仅在键盘操作时才显示焦点样式。这和<button>一类的原生控件表现一致。

<custom-button tabindex="0" role="button">Click Me</custom-button>
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}

Polyfill

你可以使用 :focus-visible 的polyfill focus-visible.js 。

可访问性关注点

保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在3到1。

可访问的视觉焦点指示: 给你的网站一些焦点! 设计有效且可用的焦点指示的一些建议。

规范

规范 状态 备注
Selectors Level 4
:focus-visible
Working Draft Initial definition.

浏览器兼容性

BCD tables only load in the browser

参见