如何使用 :focus-visible 實現僅鍵盤焦點樣式？

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

在現代瀏覽器中，:focus-visible 偽類可以用來實現鍵盤-僅焦點樣式。當使用者透過鍵盤或其他非指點裝置與頁面互動時，此偽類會符合焦點元素，從而在幫助使用者時指示焦點。因此，當使用者透過點擊或點擊進​​行互動時，焦點環會被抑制。

使用:focus-visible 自訂焦點樣式

在保留自訂焦點樣式的同時實現自訂焦點樣式為了與舊版瀏覽器相容，請遵循以下方法：

<code class="css">button:focus {
  /* Default focus styles */
}

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

在支援:focus-visible 的瀏覽器中，當:focus-visible 處於非活動狀態時，第二條規則將覆寫第一條規則中定義的焦點樣式。這確保焦點樣式僅在 :focus-visible 處於活動狀態時套用。

舊版瀏覽器的原始解決方案

對於不支援:focus-visible 的瀏覽器，另一種方法是在每個可聚焦元素中使用附加元素，如Roman Komarov 的文章中所建議的：

<code class="css">/* 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;
}</code>

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

以上是如何使用 :focus-visible 實現僅鍵盤焦點樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！