如何在不影響視覺美觀的情況下實現純鍵盤對焦風格？

實現僅鍵盤焦點樣式

您的目標是在不必要時禁用:focus，因為它在美觀上與活動狀態衝突。但是，您希望為鍵盤使用者保留焦點樣式。這裡有一個解決這個問題的綜合方法：

:focus-visible 解決方案

考慮使用:focus-visible，一個偽類，它在有益於用戶，例如在鍵盤互動期間。現代瀏覽器現在支援這個偽類。

使用:focus-visible，您可以有條件地應用焦點樣式：

<code class="css">button:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus styles */
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}</code>

瀏覽器相容性

不支援:focus -visible 的瀏覽器可能仍會顯示預設對焦環。為了確保行為一致，請使用後備策略：

<code class="css">button:focus {
  outline: none;
  background: #ffdd00; /* gold */
}

button:focus:not(:focus-visible) {
  background: white; /* undo gold */
}</code>

僅鍵盤焦點樣式

對於僅鍵盤焦點樣式解決方案，請考慮使用以下方法：

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

此方法在每個按鈕/連結/等中使用內部元素（）。並設定該內部元素的 tabindex。焦點樣式僅套用於內部元素，確保它們僅出現在鍵盤焦點上。

以上是如何在不影響視覺美觀的情況下實現純鍵盤對焦風格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！