Google Chrome 自动填充背景颜色更改？

Question

我正在尝试更改输入内容的自动填充背景颜色。

在线接受的答案似乎是这样的：

Removing input background colour for Chrome autocomplete?

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
    background-color: white !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

这似乎在一种情况下有效，即当字段已经自动填充时。

意思是我刷新浏览器，字段已经预先填充了 username/password。

当我将鼠标悬停在或单击输入时，背景颜色会发生变化。但是，当我什么都不做时，box-shadow 没有效果，它仍然设置为默认值 user agent stylesheet。

input:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

我也尝试了一些随机属性但没有成功。

input:-internal-autofill,
input:-internal-autofill:hover, 
input:-internal-autofill:focus, 
input:-internal-autofill:active,

Chrome 版本 77.0.3865.90（正式版）（64 位）

完全不知道如何覆盖它。就像它被添加在 css 规则的底部，带有 important 如此不可能被覆盖？

Answer 1

盒子阴影适合我试试下面的代码。您可以根据需要更改阴影颜色。

input:-webkit-autofill {
    background-color: transparent !important;
    -webkit-box-shadow: 0 0 0 50px white inset;
}

Google Chrome 自动填充背景颜色更改？

Google Chrome autofill background color change?

css

webkit

google-chrome

autocomplete