这招对我很管用:

padding: 5px;
background-clip: content-box;

我们有一个场景，其中我们有一个复选框来启用或禁用输入字段。

如果选中复选框，字段将被禁用。一旦复选框未选中，输入字段将被启用。我们可以使用chrome自动填充来填充这些字段，如地址和所有。

在点击返回的复选框后自动填充输入字段被禁用，但Chrome添加的背景字段填充自动填充在我的情况下，这些是城市，州和zip字段

在我不得不做的禁用输入字段中保持透明度

input:disabled:-webkit-autofill,
input:disabled:-webkit-autofill:hover, 
input:disabled:-webkit-autofill:focus, 
input:disabled:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
    -webkit-background-clip: text;
    color: white !important;
}

这已经被设计，因为这个着色行为已经从WebKit。它允许用户了解已预填充的数据。错误1334

你可以通过以下方式关闭自动完成功能:

<form autocomplete="off">
...
</form

或者你可以通过以下方式改变自动填充的颜色:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

请注意，这里有一个正在跟踪的错误，以便再次工作:http://code.google.com/p/chromium/issues/detail?id=46543

这是一个WebKit行为。

除此之外:

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);

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

这是我的解决方案，我使用了过渡和过渡延迟，因此我可以在我的输入字段上有一个透明的背景。

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

虽然在许多答案中可以找到的解决方案在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)