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

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

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

语法

该属性的语法尚未添加

示例

基本示例

在这个例子中,: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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 67
Disabled
Full support 67
Disabled
Disabled From version 67: this feature is behind the #enable-experimental-web-platform-features runtime flag (needs to be set to enabled).
Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android Full support 67
Disabled
Full support 67
Disabled
Disabled From version 67: this feature is behind the #enable-experimental-web-platform-features runtime flag (needs to be set to enabled).
Edge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

参见

文档标签和贡献者

标签: 
此页面的贡献者: AlphaGo88
最后编辑者: AlphaGo88,