Google Chrome表单自动填充及其黄色背景

<input type="text" name="foo" autocomplete="off" />

相似问题：链接

刚刚发现自己有同样的问题。这对我有用：

form :focus {
  outline: none;
}

如果要在应用CSS之前避免黄色闪烁，请对那个坏男孩打一下过渡，如下所示：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

添加autocomplete="off"不会削减它。

将输入类型属性更改为type="search"。
Google不会将自动填充应用于具有搜索类型的输入。

希望这可以节省您一些时间。

票价namrouti答案是正确的。但是，当选择输入时，背景仍然变为黄色。添加!important修复问题。如果您还想要textarea并且select具有相同的行为，只需添加textarea:-webkit-autofill, select:-webkit-autofill

仅输入

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

输入，选择，文本区域

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

没有一个解决方案对我有用，用户名和密码输入仍在填充并且背景为黄色。

因此，我问自己：“ Chrome如何确定在给定页面上应自动填充的内容？”

“它会查找输入ID，输入名称吗？表单ID？表单动作？”

通过对用户名和密码输入的实验，只有两种发现导致Chrome无法找到应自动填充的字段的方法：

1）将密码输入置于文本输入之前。2）给他们相同的名称和ID ...或不给名称和ID。

页面加载后，可以使用javascript更改页面上输入的顺序，也可以动态为其指定名称和ID。

而且Chrome不知道是什么原因...自动完成功能不起作用。

疯狂破解，我知道。但这对我有用。

Chrome 34.0.1847.116，OSX 10.7.5

在您的标签中，只需插入这一小段代码。

autocomplete="off"

但是，请勿将其放在用户名/电子邮件/ idname字段中，因为如果您仍在使用自动完成功能，它将在此字段中禁用它。但是我找到了解决方法，只需将代码放在密码输入标签中，因为无论如何您永远不会自动完成密码。此修复程序应该删除电子邮件/用户名字段上的颜色强制和行事自动完成功能，并使您避免使用Jquery或javascript之类的笨拙的骇客。

如果您想完全摆脱它，我已经调整了前面的答案中的代码，因此它也适用于悬停，活动和集中注意力：

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

我用这个

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

这帮助了我，仅CSS版本。

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

其中，白色可以是任何你想要的颜色。

答案的组合对我有用

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

有点黑，但对我来说很完美

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

为我工作，只需要更改css。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

您可以将任何颜色代替#ffffff。

如果你们想要透明的输入字段，则可以使用过渡和过渡延迟。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

在Firefox中，您可以使用autocomplete =“ off / on”属性禁用表单上的所有自动完成功能。同样，可以使用相同的属性设置各个项目的自动完成功能。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

您可以在Chrome浏览器中对其进行测试，因为它应该可以正常工作。

以下CSS删除了黄色背景色，并将其替换为您选择的背景色。它不会禁用自动填充，并且不需要jQuery或Javascript黑客。

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: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

复制的解决方案来自： 覆盖浏览器表单填充并使用HTML / CSS突出显示输入

将“白色”更改为所需的任何颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}