CSS 移除超連結顏色與藍色外框 (a 標籤 text-decoration / outline)

超連結（<a> 標籤）在每個瀏覽器中都有預設的樣式（預設藍字、點過變紫字、加上底線），且在手機移動端或滑鼠點擊時常會出現一圈藍色外框。這篇完整整理如何透過 CSS 移除超連結顏色、底線與點擊時的藍色外框。

超連結樣式重置速查表

常見超連結視覺問題	對應解決的 CSS 屬性
移除預設藍色/紫色字體	color: inherit;
移除預設超連結底線	text-decoration: none;
移除點擊後的焦點藍色外框	outline: none;（或搭配 :focus-visible）
移除手機觸控瞬間的藍色高亮色塊	-webkit-tap-highlight-color: transparent;

---

1. 移除超連結點擊時的藍色外框（outline: none）

在電腦版或手機版點選超連結時，瀏覽器為了標示焦點（Focus），常會在連結周圍顯示藍色外框。若只需要快速去除這個外框，可以在 CSS 中針對 a 與 a:focus 加上 outline: none：

a,
a:focus {
  outline: none;
}

兼顧鍵盤無障礙的現代寫法（:focus-visible）

如果直接把所有 outline 設為 none，使用鍵盤 Tab 鍵導覽網頁的使用者會完全看不到目前游標停在哪個按鈕上。現代 CSS 更推薦搭配 :focus:not(:focus-visible)，做到「滑鼠點擊時隱藏藍框，但鍵盤 Tab 切換時保留外框」：

/* 滑鼠點擊或觸控時移除藍色外框 */
a:focus:not(:focus-visible) {
  outline: none;
}

/* 使用者按鍵盤 Tab 切換時，顯示自訂的柔和外框 */
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

---

2. CSS 移除超連結預設藍色字體與底線

瀏覽器預設會將未點擊的超連結設為藍色、已點擊設為紫色（:visited），並加上底線（text-decoration: underline）。若要讓超連結直接繼承父層容器的文字顏色並移除底線，請加上以下設定：

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit; /* 自動繼承外層文字顏色，不再顯示預設藍字與紫字 */
  text-decoration: none; /* 移除超連結底線 */
}

關於 :visited 的隱私限制技術備註

在實務開發中，為了防止惡意網站透過 :visited 偽類別偵測使用者的瀏覽紀錄（例如檢查使用者是否造訪過特定銀行或社群網站），現代瀏覽器對 :visited 的 CSS 屬性設定有嚴格的隱私限制。

目前僅允許針對 :visited 設定以下屬性：

• color
• background-color
• border-color
• outline-color
• column-rule-color
• fill 與 stroke（針對 SVG）

若嘗試透過 display: none、font-size 或 text-decoration 等屬性在 :visited 狀態下改變樣式，瀏覽器會直接忽略該指令，以確保使用者的瀏覽隱私不被洩露。

---

3. 移除手機版點擊超連結瞬間出現的「半透明藍色背景框」

在 iOS Safari 或 Android Chrome 手機瀏覽器上，用手指輕觸 <a> 超連結或按鈕的瞬間，常會閃過一個半透明的藍色或灰色高亮方塊。這不是 outline 造成的，而是行動瀏覽器專屬的觸控高亮屬性，可透過 -webkit-tap-highlight-color 徹底移除：

a,
button {
  -webkit-tap-highlight-color: transparent;
}

若是因為在手機上連續點擊時不小心選取到文字，導致整段文字出現反藍背景，則需要使用 user-select: none 來處理，詳細寫法請參考 css 禁止選取 – 去除 html 點擊選取出現藍色背景。

---

參考資料

• MDN Web Docs: :focus-visible
• MDN Web Docs: text-decoration