如何使用 HTML 和 CSS 覆蓋瀏覽器自動填入和輸入突出顯示？

使用HTML/CSS 覆蓋表單自動填充和輸入突出顯示

在Web 開發中，刪除瀏覽器產生的自動填充建議和輸入突出顯示可能會出現問題，尤其是在處理在同一頁上有多個表單。本文解決了這兩個問題，提供了覆蓋自動填充並刪除黃色背景突出顯示的解決方案。

自動填入：

瀏覽器會自動建議先前在中輸入的資訊輸入欄位。雖然對某些用戶來說很方便，但當同一頁面上的不同表單不應自動填入時，這可能會出現問題。若要停用特定輸入的自動填充，請使用自動完成屬性：

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

輸入反白：

預設情況下，瀏覽器在輸入欄位時套用黃色背景是專注的。可以使用 CSS 覆寫此行為。 :focus 偽類針對目前處於焦點的任何元素。以下是使用 CSS 刪除黃色突出顯示的方法：

input:focus {
  background-color: transparent;
}

但是，請注意，此解決方案不再適用於最新版本的 Chrome。相反，請使用以下技巧：

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

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

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