如何使用 :focus-visible 实现仅键盘焦点样式？

现代浏览器中仅键盘焦点样式

在现代浏览器中，:focus-visible 伪类可以用来实现键盘-仅焦点样式。当用户通过键盘或其他非指点设备与页面交互时，该伪类会匹配焦点元素，从而在帮助用户时指示焦点。因此，当用户通过单击或点击进行交互时，焦点环会被抑制。

使用 :focus-visible 自定义焦点样式

在保留自定义焦点样式的同时实现自定义焦点样式为了与旧版浏览器兼容，请遵循以下方法：

<code class="css">button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}</code>

在支持 :focus-visible 的浏览器中，当 :focus-visible 处于非活动状态时，第二条规则将覆盖第一条规则中定义的焦点样式。这确保焦点样式仅在 :focus-visible 处于活动状态时应用。

旧版浏览器的原始解决方案

对于不支持 :focus-visible 的浏览器，另一种方法是在每个可聚焦元素中使用附加元素，如 Roman Komarov 的文章中所建议的：

<code class="css">/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

通过将焦点样式放置在内部元素上，同时删除父元素和内部元素上的默认轮廓添加自定义焦点样式后，只有键盘交互才能将焦点样式应用于主要可见元素。

以上是如何使用 :focus-visible 实现仅键盘焦点样式？的详细内容。更多信息请关注PHP中文网其他相关文章！