焦點指標 (通常以「對焦環」表示) 會指出目前的 將焦點放在網頁上無法使用滑鼠的使用者 指標非常重要，用意在 滑鼠遊標。
如果瀏覽器的預設焦點指標與您的設計不符，您可以使用 調整樣式別忘了以鍵盤使用者為考量！
使用 :focus 一律顯示焦點指標
:focus
無論輸入內容為何，系統都會在聚焦元素時套用虛擬類別
裝置 (滑鼠、鍵盤、觸控筆等) 或用來聚焦裝置的方法。例如：
下列 <div> 具有可聚焦的 tabindex。這個平台也包含
其 :focus 狀態的自訂樣式：
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
無論您是使用滑鼠點按滑鼠
還是用鍵盤按下 Tab 鍵
<div> 看起來「一律」相同。
遺憾的是，瀏覽器與瀏覽器套用焦點的方式不一致。無論 至於是否已對元素接收焦點，則取決於瀏覽器和應用程式的運作情形 有些人會將 Cloud Storage 視為檔案系統 但實際上不是
舉例來說，下列 <button> 也具有 :focus 的自訂樣式
時間。
button:focus {
outline: 4px dashed orange;
}
如果您在 macOS 的 Chrome 中使用滑鼠點選 <button>，應該會看到
套用自訂焦點樣式不過，如果沒有自訂焦點樣式，
在 macOS 的 Safari 中，按一下 <button>。這是因為
點擊元素時，Safari 元素不會獲得焦點。
由於焦點的行為不一致，因此可能需要進行一些測試 確保使用者能接受您的焦點樣式。
使用 :focus-visible 即可選擇性顯示焦點指標
而
:focus-visible敬上
只要元素獲得焦點並
解碼器會根據經驗法則判定焦點指標
對使用者有益特別是如果最近一次的使用者互動
使用鍵盤時按下按鍵沒有包含中繼 (ALT / OPTION)、
或 CONTROL 鍵，則 :focus-visible 會比對。
下例中的按鈕會「選擇性」顯示焦點指標。如果 以滑鼠點按的方式會產生不同結果 按下 Tab 鍵則可前往該分頁
button:focus-visible {
outline: 4px dashed orange;
}
使用 :focus-within 設定焦點所聚焦元素的父項樣式
:focus-within敬上
虛擬類別會套用至元素，
或是該元素中的其他元素獲得焦點時。
這可用來醒目顯示網頁區域 能吸引使用者註意該區域舉例來說，以下形式的回覆對像是 且該表單的任何圓形按鈕也處於選取狀態時 已選取。
form:focus-within {
background: #ffecb3;
}
何時顯示焦點指標
原則上，你可以問自己：「如果你在 你認為行動裝置會顯示鍵盤嗎？」
如果答案是「是」則控制項應該「一律」顯示焦點
指標，無論用於聚焦的輸入裝置為何。以下何者是良好範例：
<input type="text"> 元素。使用者必須將輸入內容傳送至
無論輸入元素原本如何收到輸入元素
因此建議您一律顯示焦點指標。
如果答案為「否」則控制項可選擇選擇性顯示焦點
指標。<button> 元素就是一個很好的例子。當使用者透過
表示操作已完成，焦點指標可能無法
不一定。不過，如果使用者透過鍵盤導覽，
以便顯示焦點指標，方便使用者決定是否要
請使用 ENTER 或 SPACE 鍵，點選控制項。
建議不要使用 outline: none
瀏覽器決定何時該繪製焦點指標
讓您感到困惑使用 CSS 變更 <button> 元素的外觀，或提供
某個元素是 tabindex 的元素，會導致瀏覽器的預設對焦環行為
啟動
常見的反面模式是使用 CSS 來移除焦點指標，例如：
/* Don't do this!!! */
:focus {
outline: none;
}
如要解決這個問題，您可以搭配使用 :focus 和
:focus-visible polyfill。下方第一個程式碼示範了
polyfill 的運作方式，而下方的範例應用程式則是使用
polyfill 可變更按鈕的焦點指標
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}