您希望在不需要時停用焦點，因為您不喜歡焦點在時導航的外觀在它上面。它使用與 .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中文網其他相關文章！
