點連結出現外框怎麼拿掉？用 :focus-visible 取代 outline: none 的正確寫法

用滑鼠點了連結或按鈕之後，周圍出現一圈虛線或藍色外框，很多人的第一個反應是：「這是什麼？怎麼拿掉？」這篇文章的舊版也教過這段：

a {
  outline: none !important;
  behavior: expression(this.onFocus=this.blur()) !important;
}

請不要再使用這段，如果網站裡有類似的寫法，也建議找出來改掉。下面說明原因，以及現在的正確做法。

那圈外框是什麼？

那是焦點外框（focus outline），代表「目前選到的是這個元素」。

不用滑鼠的人，會用鍵盤的 Tab 鍵在連結、按鈕、表單欄位之間移動，按 Enter 開啟。焦點外框就是他們的滑鼠游標，拿掉之後，他們完全不知道現在停在哪裡，網站幾乎沒辦法用。

依賴鍵盤的人其實不少：手部不方便、沒辦法用滑鼠的人，視力不好、需要把畫面放大的人，還有很多習慣用 Tab 快速填表單的人。國際無障礙規範 WCAG 也有一條「焦點可見」（2.4.7），要求用鍵盤操作時，一定要看得到焦點在哪裡。

舊寫法的問題

• outline: none !important：把所有情況的外框都拿掉，包含鍵盤操作；加了 !important，之後想用別的樣式加回來也蓋不過去。
• behavior: expression(...)：這是舊版 IE 專用的語法，現在的瀏覽器都不認得，這一行等於沒有作用。它原本的用途是「一取得焦點就立刻取消焦點」，對鍵盤使用者的影響比 outline: none 還嚴重。

現代瀏覽器已經幫你判斷好了

以前的瀏覽器只要連結被點到就會顯示外框，所以大家才急著拿掉。現在的瀏覽器會自己判斷什麼時候該顯示：

• 用滑鼠點連結、按鈕：通常不顯示外框。
• 用鍵盤 Tab 移動：顯示外框。
• 文字輸入框：不管用滑鼠還是鍵盤，點進去都會顯示，讓人知道正在輸入的是哪一格。

這套判斷規則，在 CSS 裡就叫做 :focus-visible，現代瀏覽器都支援。

所以，如果你的網站用滑鼠點一下就出現外框，多半是主題或外掛自己寫了 :focus 的樣式。把它改成 :focus-visible 就好，不需要把外框整個拿掉。

正確寫法

1. 主題寫了 :focus 外框

如果在主題的 CSS 裡看到類似這樣的寫法：

a:focus {
  outline: 1px dotted;
}

把 :focus 改成 :focus-visible：

a:focus-visible {
  outline: 1px dotted;
}

如果不方便改主題檔案（例如用的是現成主題，更新會被蓋掉），可以到 WordPress 後台「外觀 → 自訂 → 附加的 CSS」加上這段：

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

意思是：取得焦點、但不是需要顯示外框的情況（也就是滑鼠點擊）時，才把外框拿掉。用鍵盤操作時，外框照常顯示。

2. 設計一個更清楚、更好看的焦點外框

瀏覽器預設的外框有時候太細，或顏色跟網站不搭。與其拿掉，不如設計一個符合網站風格的樣式：

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

• outline：外框的粗細、樣式、顏色。選一個在網站背景上看得清楚的顏色。
• outline-offset：外框跟元素之間留一點距離，比較不會壓到文字。
• outline 不佔版面空間，出現或消失都不會讓畫面跳動，比 border 更適合做焦點樣式。

深色背景的區塊，外框顏色可以另外設定：

.dark-section :focus-visible {
  outline-color: #fff;
}

3. 用陰影做焦點效果時

有些設計喜歡用 box-shadow 做出發光的焦點效果。要注意 Windows 的高對比模式（對比佈景主題）會把陰影拿掉，焦點就又看不見了。加一條透明的外框當保險，高對比模式下它會自動顯示成看得見的顏色：

.button:focus-visible {
  box-shadow: 0 0 0 4px rgb(26 115 232 / 40%);
  outline: 2px solid transparent;
}

怎麼檢查網站有沒有問題？

1. 打開網站，先用滑鼠點一下頁面的空白處。
2. 一直按 Tab 鍵，看每個連結、按鈕、選單、表單欄位，是不是都有清楚的外框跟著移動。
3. 如果按了幾下外框就「不見了」，代表有地方把外框拿掉了。按 F12 打開開發者工具，在 CSS 裡搜尋 outline: none、outline: 0，找到之後改成上面的 :focus-visible 寫法。

延伸閱讀

• CSS cursor 滑鼠游標樣式整理：pointer、not-allowed 等常用值與自訂游標寫法
• HTML 加入 CSS 的三種方法：外部樣式表、內部樣式表、行內樣式怎麼選
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法

好用的網站，不只滑鼠點起來順手，用鍵盤、用手機的人也要能順利操作。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與網站維護託管，服務台北與全台客戶，歡迎來聊聊。