要有一个透明的背景，同时不使用时间延迟(特别是在现代web应用程序中，人们可以停止使用它一段时间，并希望界面的行为是可预测的)，使用这个:

input:-webkit-autofill { 
    -webkit-background-clip: text;
}

身体{ 背景:lightblue; ｝ 输入{ 背景:透明; ｝ 输入。no-autofill-bkg: -webkit-autofill { -webkit-background-clip:文本; ｝ <input type="text" name="email" /> <input type="text" name="email" class="no-autofill-bkg" />

工作环境:Chrome 83 / 84.0.4147.89, Edge 84.0.522.44

如果你决定重新发布我的解决方案，我只要求你包括我的名字或链接到这个。

谷歌Chrome用户代理阻止开发者的CSS，所以改变自动填充UI必须使用另一个属性，像这样:

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #d500ff inset !important;
    /*use inset box-shadow to cover background-color*/
    -webkit-text-fill-color: #ffa400 !important;
    /*use text fill color to cover font color*/
}

以上所有的答案都有效，但也有缺点。下面的代码是上述两个答案的融合，工作完美无缺，没有眨眼。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

没有一个解决方案对我有效，插入阴影对我不起作用，因为输入有一个半透明的背景覆盖在页面背景上。

所以我问自己，“Chrome如何决定在给定的页面上应该自动填充什么?”

“它会查找输入id、输入名称吗?”表单的id吗?表单动作?”

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

1)将密码输入放在文本输入之前。2)给他们相同的名字和身份证……或者根本没有名字和身份。

页面加载后，用javascript你可以动态地改变页面上输入的顺序，或者动态地给他们他们的名字和id…

Chrome不知道是什么击中了它…自动补全功能失效!

疯狂的黑客，我知道。但这对我很有用。

Chrome 34.0.1807.116, OSX 10.7.5

虽然在许多答案中可以找到的解决方案在Chrome中都可以使用，但在Mac和iOS的Safari中却不能使用。

Safari需要一个额外的语句- background-clip。

这是一个解决方案的完整代码，适用于不同平台上的所有主要浏览器:

/* Disable autofill highlighting */
input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-input-color) !important;
    -webkit-box-shadow: 0 0 0 1rem var(--page-background-color) inset !important;
    background-clip: content-box !important;
}

(请用自己的值修改——text-input-color和——page-background-color)

除此之外:

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

你可能还想补充

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

另一方面，当你点击输入时，黄色会回来。 对于焦点，如果你使用bootstrap，第二部分是用于边界突出显示0 0 8px rgba(82, 168, 236, 0.6);

这样它看起来就像任何自举输入。