如何在保留键盘可访问性的同时禁用焦点样式？

我可以在不需要时禁用焦点吗？

您希望在不需要时禁用焦点，因为您不喜欢焦点在时导航的外观在它上面。它使用与 .active 相同的样式并且令人困惑。然而，你不想为使用键盘的人摆脱它。

问题可能会解决

一些海报提到了 :focus-visible 伪类，现在它有不错的浏览器支持。根据规范，浏览器现在应该仅在对用户有帮助时才指示焦点，例如当用户通过键盘或其他非指点设备与页面交互时。

这意味着在大多数情况下在浏览器中，当用户单击/点击按钮（或另一个可聚焦元素）时，即使按钮获得焦点，用户代理也不会显示聚焦环，因为在这种情况下，聚焦环对用户没有帮助。

向后兼容性

像这样使用 :focus-visible 可能出现的问题是，不支持它的浏览器将显示默认的焦点环，根据具体情况，该焦点环可能不清晰或不可见。 design.

原始答案

如果 :focus-visible 解决方案不足以实现向后兼容性，您可以使用以下方法为按钮、链接和其他容器元素实现仅键盘焦点样式解决方案如下：

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}

该技术将所有样式放置在容器的内部元素上，防止使用鼠标时出现焦点样式。

以上是如何在保留键盘可访问性的同时禁用焦点样式？的详细内容。更多信息请关注PHP中文网其他相关文章！