我们可以使用-webkit-autofill伪选择器来定位这些字段，并按照我们认为合适的方式设置它们的样式。默认样式只影响背景颜色，但大多数其他属性都适用于此，例如border和font-size。我们甚至可以使用-webkit-text-fill-color来更改文本的颜色，下面的代码片段中包含了它。

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}

这将适用于正常、悬停、聚焦和激活状态下的输入、文本区和选择。

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

下面是上述解决方案的SCSS版本，供使用SASS/SCSS的人使用。

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    &, &:hover, &:focus, &:active{
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

我有一个纯CSS解决方案，使用CSS过滤器。

filter: grayscale(100%) brightness(110%);

灰度滤镜将黄色替换为灰色，然后亮度删除灰色。

看到CODEPEN

我有一个解决方案，如果你想防止从谷歌chrome的自动填充，但它有点“砍刀”，只是删除类谷歌chrome添加到那些输入字段，并设置值为“”，如果你不需要显示存储数据后加载。

$(document).ready(function () {
    setTimeout(function () {
        var data = $("input:-webkit-autofill");

        data.each(function (i, obj) {
            $(obj).removeClass("input:-webkit-autofill");
            obj.value = "";
        });
    }, 1);          
});

我有个更好的办法。

将背景设置为如下所示的另一种颜色并不能解决我的问题，因为我需要一个透明的输入字段

-webkit-box-shadow: 0 0 0px 1000px white inset;

所以我尝试了一些其他的方法，然后我想到了这个:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

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

如果选中复选框，字段将被禁用。一旦复选框未选中，输入字段将被启用。我们可以使用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;
}