:focus-visible

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022 .

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

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

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

语法

css 
:focus-visible {
  /* ... */

示例

基本示例

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

html 
<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>

css
input,
button {
  margin: 10px;
.focus-only:focus {
  outline: 2px solid black;
.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;