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

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

自定义焦点样式：focus-visible

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

button:focus {
  /* Default focus styles */
}

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

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

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

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

/* 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;
}

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