:focus-visible

此选择器可用于根据用户的输入方式（鼠标与键盘）提供不同的焦点指示器。

最初，用户代理 CSS 仅根据 :focus 伪类设置焦点样式，并为大多数获得焦点的元素设置焦点环轮廓。这意味着所有元素（包括所有链接和按钮）在获得焦点时都会应用焦点环，许多人认为这很丑陋。由于外观原因，一些作者删除了用户代理的轮廓焦点样式。更改焦点样式会降低可用性，而删除焦点样式会使键盘导航对有视力障碍的用户不可用。

浏览器不再在每个元素获得焦点时，通过绘制“焦点环”等方式来明显地显示焦点。相反，它们使用各种启发式方法仅在对用户最有用时提供焦点指示器。例如，当使用指向设备点击按钮时，通常不会以视觉方式指示焦点，但当需要用户输入的文本框获得焦点时，则会指示焦点。虽然在用户使用键盘导航页面或通过脚本管理焦点时始终需要焦点样式，但当用户知道他们将要设置焦点的目标时，例如，当他们使用指向设备（例如鼠标或手指）物理地将焦点设置在元素上时，则不需要焦点样式，除非该元素继续需要用户的关注。

:focus 伪类始终匹配当前获得焦点的元素。:focus-visible 伪类也匹配获得焦点的元素，但前提是用户需要了解当前的焦点位置。由于 :focus-visible 伪类在需要时匹配获得焦点的元素，因此使用 :focus-visible（而不是 :focus 伪类）允许作者更改焦点指示器的外观，而无需更改焦点指示器出现的时间。

当使用 :focus 伪类时，它始终会定位当前获得焦点的元素。这意味着当用户使用指向设备时，一个可见的焦点环会出现在获得焦点的元素周围，有些人认为这很突兀。:focus-visible 伪类会尊重用户代理的选择性焦点指示行为，同时仍然允许自定义焦点指示器。

确保低视力人群能够看到视觉焦点指示器。这也有利于在光线充足的环境（例如阳光下的户外）中使用屏幕的任何人。 WCAG 2.1 SC 1.4.11 非文本对比度 要求视觉焦点指示器的对比度至少为 3:1。

• 可访问的视觉焦点指示器：让你的网站获得一些焦点！关于设计有用且易用的焦点指示器的提示

如果一个人使用混合的输入方式，焦点指示器出现和消失的原因可能并不明显。对于认知能力有障碍或技术水平较低的使用者来说，交互式元素的不一致行为可能会令人困惑。

此示例展示了三对控件。每对包含一个text 输入框和一个按钮。

• 第一对没有为焦点状态添加任何自定义样式，显示默认情况。
• 第二对使用:focus伪类添加样式。
• 第三对使用:focus-visible伪类添加样式。

<input type="text" value="Default styles" /><br />
<button>Default styles</button><br />

<input class="focus-only" type="text" value=":focus" /><br />
<button class="focus-only">:focus</button><br />

<input class="focus-visible-only" type="text" value=":focus-visible" /><br />
<button class="focus-visible-only">:focus-visible</button>

input,
button {
  margin: 10px;
}

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

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

如果您依次点击每个元素，您会看到，当使用:focus来设置焦点环的样式时，当用户点击按钮时，UA 会绘制焦点环。但是，当使用:focus-visible来设置焦点环的样式时，当用户点击按钮时，UA 不会绘制焦点环，就像默认情况一样。

如果您随后通过 Tab 键遍历每个元素，您会看到，在所有三种情况下 - 默认、:focus 和:focus-visible - 当用户使用键盘导航到按钮时，UA 会在按钮周围绘制焦点环。

这展示了:focus-visible如何使设计人员能够遵循浏览器在确定何时应该显示焦点环方面的逻辑。

如果您的代码必须在不支持:focus-visible 的旧版浏览器中运行，请使用@supports 检查对:focus-visible 的支持情况，并在其中重复相同的焦点样式，但放在:focus 规则内。请注意，即使您完全不为:focus 指定任何内容，旧版浏览器也会简单地显示原生轮廓，这可能就足够了。

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">
  Button without fallback
</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

• :focus
• :focus-within
• 针对:focus-visible 的 polyfill