css - 谷歌浏览器自动填充背景颜色变化？

Question

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

网上接受的答案似乎是这样的：

删除 Chrome 自动完成的输入背景颜色？

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

这似乎在一种情况下可以接受，即字段已经自动填充。

这意味着我刷新浏览器并且这些字段已经预先填充了用户名/密码。

当我将鼠标悬停在或单击输入时，背景颜色会发生变化。但是，当我什么都不做时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无法覆盖？

标签： cssgoogle-chromeautocompletewebkit

Answer 1

盒子阴影为我工作，试试下面的代码。您可以根据需要更改阴影颜色。

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