你瞭解 CSS 的全部 4 種焦點樣式嗎？

王大冶發表於2024-12-05
CSS
  • CSS技巧與案例詳解
  • vue2與vue3技巧合集
  • VueUse原始碼解讀

image.png

在網站開發中，確保使用者能夠輕鬆地瀏覽和操作頁面是非常重要的。CSS 焦點樣式是一種有效的方式，可以直觀地展示頁面中哪個元素被選中了。

本文介紹了 4 種處理 CSS 焦點樣式的方式，每種方式都附有簡單的示例，幫助你快速掌握這些技巧。

什麼是 CSS 焦點樣式？

CSS 焦點樣式是一種視覺效果，用於突出顯示頁面中當前被選中的元素。
它對使用鍵盤、螢幕閱讀器或其他輔助工具導航的網站使用者尤為重要。

良好的焦點樣式可以顯著提升網站的可訪問性，讓使用者更方便地互動。

1. :focus

:focus 選擇器在元素被選中（如透過點選或鍵盤切換）時生效。

/* 為選中的元素新增樣式 */
input:focus, textarea:focus, button:focus {
    outline: 2px solid blue; /* 為選中元素新增藍色邊框 */
}

說明：

當使用者點選或使用鍵盤選中 input、textarea 或 button 時，藍色的邊框會出現，明確地指示當前的焦點位置。

2. :focus-visible

:focus-visible 是一種更智慧的焦點樣式，只在需要時（通常是鍵盤導航）顯示，避免滑鼠點選時觸發焦點效果。

/* 僅鍵盤操作時顯示的焦點樣式 */
input:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid green; /* 鍵盤導航時顯示綠色邊框 */
}

說明：

使用 :focus-visible，當使用者透過鍵盤導航到某個元素時，會顯示綠色邊框；而透過滑鼠點選時不會觸發，這樣可以保持頁面更整潔。

3. :focus-within

:focus-within 是一種父級樣式，當其子元素獲得焦點時，父級會被應用樣式。

/* 為包含選中子元素的容器新增樣式 */
.form-container:focus-within {
    border: 2px solid purple; /* 為容器新增紫色邊框 */
}

說明：

如果 form-container 中的任意子元素（如輸入框）獲得焦點，整個容器會新增紫色邊框。這種方式非常適合表單設計，突出顯示當前互動區域。

4. 自定義組合焦點樣式（:focus-visible-within）

雖然 CSS 沒有直接提供 :focus-visible-within，但我們可以透過組合 :focus-visible 和 :focus-within 來實現類似效果。

/* 清除預設焦點樣式 */
:focus-visible, :focus-within {
    outline: none;
}

/* 自定義焦點樣式 */
:focus-visible:focus-within {
    border: 2px solid orange; /* 為選中元素及其容器新增橙色邊框 */
}

說明：

此方案先移除預設的 outline 樣式，保持頁面簡潔，然後透過組合選擇器為選中元素及其容器新增橙色邊框，使視覺效果更加美觀。

總結

良好的焦點樣式設計可以提升網站的使用者體驗，尤其是對依賴鍵盤或輔助技術的使用者。
以下是 4 種主要焦點樣式的特點：

  • :focus：基礎焦點樣式，用於所有選中元素。
  • :focus-visible：僅在鍵盤導航時顯示焦點樣式。
  • :focus-within：為容器及其子元素提供樣式支援。
  • 自定義組合樣式：結合 :focus-visible 和 :focus-within，實現更精細的焦點樣式。

結合實際需求應用這些方法，為你的使用者打造更加友好的網頁體驗！

首發於公眾號 大遷世界，歡迎關注。📝 每週一篇實用的前端文章 🛠️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章