使用 CSS :autofill 醒目顯示使用者未編輯的瀏覽器自動填入欄位

網頁功能： :autofill

使用 CSS :autofill 醒目顯示已 (或未) 自動填入的欄位，引導使用者順利填寫表單。

導入方式

如要醒目顯示瀏覽器自動填入 (且使用者未編輯) 的表單欄位，請使用 :autofill 類別在 CSS 中新增選取器。這項屬性可用於 <input>、<select> 或 <textarea> 元素。

設定自動填入狀態的樣式時，請務必遵循無障礙功能最佳做法：

  • 多種狀態指標：請勿僅依賴邊框顏色來表示自動填入狀態。使用多個指標 (例如邊框粗細和自訂背景陰影)，確保使用者能感知狀態。
  • 保留焦點指標：請勿移除焦點外框 (outline: none)，除非能為鍵盤使用者提供清晰、高對比的替代方案。

以下範例使用 :autofill 設定自訂邊框和背景，以及明確的焦點樣式：

input:autofill,
input:-webkit-autofill {
  /* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}

/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

如這個範例所示，box-shadow 屬性可用來自訂背景，因為 background-color 無法直接在自動填入欄位中覆寫。

使用正確的 CSS 虛擬類別名稱

請勿使用 :auto-fill：這是錯誤做法。

MANDATORY: Use :autofill as this is the correct pseudo-class name.

備用策略

:autofill 虛擬類別是漸進增強功能。在不支援這項功能的瀏覽器中，表單仍可正常運作，但輸入內容不會顯示自訂自動填入醒目顯示。使用者仍可順利填寫表單。請勿使用其他 JavaScript 備用廣告。