您希望在不需要时禁用焦点，因为您不喜欢焦点在时导航的外观在它上面。它使用与 .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中文网其他相关文章！
