現代瀏覽器中僅鍵盤焦點樣式

在現代瀏覽器中，: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;
}

透過將焦點樣式放置在內部元素上，同時在新增自訂焦點樣式後刪除父元素和內部元素上的預設輪廓，只有鍵盤互動才能將焦點樣式套用到主要可見元素。