如何使用 CSS 覆蓋預設瀏覽器表單自動填入和突出顯示？

使用 CSS 覆蓋預設瀏覽器表單行為

Web 瀏覽器通常會自動填充表單欄位並以黃色背景突出顯示輸入欄位。雖然對於某些用戶來說很方便，但在某些情況下可能並不理想。讓我們探討如何在 HTML 和 CSS 中覆寫這些預設行為。

停用表單自動填入

要防止表單自動填充，請使用表單標籤。例如：

<form autocomplete="off">
  ...
</form>

但是，並非所有瀏覽器都完全支援此屬性。

刪除輸入突出顯示

覆蓋預設值輸入欄位的黃色背景突出顯示，使用以下CSS 規則：

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

此程式碼設定背景由瀏覽器自動填入的輸入欄位的顏色。透過使用 !important，您可以確保此規則優先於任何其他樣式。

其他提示

如果上述CSS 規則在較新版本中不起作用Chrome 的，請嘗試使用這個技巧：

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}

這會在輸入欄位周圍建立一個「強烈」陰影，有效隱藏黃色背景。

以上是如何使用 CSS 覆蓋預設瀏覽器表單自動填入和突出顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！