禁用谷歌浏览器中的自动填充背景颜色

如今，许多网站都使用 input 输入框来收集各种类型的信息，例如姓名、地址、电话号码、电子邮件地址等。为了方便用户的操作，谷歌浏览器提供了自动填充功能，可以自动将用户此前输入过的信息填充到 input 输入框中。然而，有些用户可能不希望在每次输入信息时看到自动填充的背景颜色，因为这可能会影响页面的美观性。因此，本文将介绍如何关闭谷歌浏览器中的 input 输入框自动填充的背景颜色。

1. 禁用所有自动填充

在浏览器地址栏中输入"chrome://settings/autofill"，然后按回车键，您将看到 Chrome 的自动填充设置页面。在这里，您可以通过选择 "禁用自动填充" 来禁用 Chrome 中的所有自动填充。但是，这可能会影响您在其他网站上的用户体验，因为您将无法自动填充任何信息。

2. 使用 CSS 样式更改自动填充背景颜色

如果您只想更改自动填充的背景颜色，您可以使用 CSS 样式。以下 CSS 代码可以将自动填充的背景颜色更改为白色：

input:-webkit-autofill {
  background-color: white !important;
}

您可以在浏览器的样式表中添加上述代码，或者使用浏览器扩展程序来应用这些样式。

3. 使用 JavaScript 代码修改自动填充功能

如果您希望更灵活地控制自动填充功能，您可以使用 JavaScript 代码。以下代码可以防止 input 输入框显示自动填充背景颜色：

document.addEventListener("DOMContentLoaded", function() {
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("focus", function() {
      this.style.backgroundColor = "white";
    });
  }
});

您可以将上述代码添加到您网站的 HTML 代码中，或者使用浏览器扩展程序来运行这些代码。

以上是关闭谷歌浏览器中的 input 元素自动填充背景颜色的三种方法。您可以根据自己的需求选择一种方法来实现您的目的。希望本指南对您有所帮助。