怎樣修改chrome記住密碼後自動填充表單的黃色背景？

王铁柱6發表於2024-11-21
Chrome密碼

Chrome 的自動填充表單的黃色背景是由瀏覽器預設樣式控制的，你可以透過 CSS 來修改它。 主要有以下幾種方法：

1. 使用 -webkit-autofill 偽類:

這是最常用的方法，可以直接針對自動填充的表單元素應用樣式。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #your-background-color !important; /* 例如: #ffffff 或 rgba(255, 255, 255, 0.8) */
  background-image: none !important;
  color: #your-text-color !important; /* 例如: #000000 */
  -webkit-box-shadow: 0 0 0 1000px #your-background-color inset !important; /*  延伸背景色到輸入框內部 */
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  background-color: #your-focus-background-color !important; /*  獲得焦點時的背景色 */
}
  • !important 是必要的，因為瀏覽器預設樣式的優先順序很高。
  • -webkit-box-shadow 技巧是為了覆蓋 Chrome 預設的淡黃色陰影，並確保背景色完全填充輸入框，包括 padding 區域。 將 1000px 調整為一個足夠大的值即可。
  • 可以根據需要設定 color 屬性來調整文字顏色。

2. 短暫延遲後再應用樣式:

由於自動填充是瀏覽器非同步完成的，有時直接應用樣式可能無效。 可以使用 JavaScript 新增一個短暫的延遲，然後再應用 CSS 樣式。

setTimeout(function() {
  document.querySelectorAll('input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill').forEach(el => {
    el.style.backgroundColor = '#your-background-color';
    // ...其他樣式
  });
}, 100); // 延遲 100 毫秒

3. 使用圖片背景:

你可以使用圖片背景來覆蓋自動填充的黃色背景。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-image: url('your-background-image.png') !important;
}

4. 禁用自動填充 (不推薦):

雖然可以禁用自動填充，但這會降低使用者體驗，不推薦使用。

  • 在單個 input 元素上禁用：<input type="text" autocomplete="off">
  • 在表單級別禁用：<form autocomplete="off"> ... </form>

選擇哪種方法?

第一種方法 -webkit-autofill 偽類是最常用和推薦的方法。 如果遇到問題，可以嘗試結合第二種方法新增短暫延遲。 使用圖片背景的方法需要額外的圖片資源，靈活性較差。 禁用自動填充會影響使用者體驗，應儘量避免。

額外提示:

  • 為了確保樣式生效，最好將 CSS 放在你的網站的 <head> 部分，或者放在一個單獨的 CSS 檔案中，並將其連結到你的 HTML 檔案中。
  • 測試不同瀏覽器: 雖然這些方法主要針對 Chrome，但也可能適用於其他基於 Chromium 的瀏覽器。 最好在不同的瀏覽器中測試你的程式碼，以確保相容性。

希望這些資訊能幫到你!

相關文章