如何更改Safari自动填充黄色背景颜色

Question

这张图片是我从safari获得的：

虽然这是我的代码：

资料来源：

How to Remove WebKit's Banana-Yellow Autofill Background

Remove forced yellow input background in Chrome - 即使它说chrome但仍然指向webkit-autofill

我曾尝试使用background-color:white !important;来覆盖锁定的CSS。调试工具显示用户代理样式表背景颜色已划掉，但仍然没有更改颜色并且使用了自定义。

这真的让我感到困惑，我不知道为什么不允许更改用户代理样式表。

Answer 1

正在阅读大多数浏览器想要指示自动填充（Safari对此指示更加坚定）。

我确实找到了另一种hack，你可以使用-webkit-box-shadow来覆盖背景颜色。在检查时，尝试用类定位特定输入不起作用（即特异性）。

在Safari（10.0.2）中，浏览器添加shadow content作为用户代理，其中包括背景颜色和自动填充的值。这里的问题是，浏览器禁止编辑那些特定的样式（如background-color），因此下面给出答案的原因。

input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}

如果你在输入中也有一个边框底部

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

资源： - medium-post - stackoverflow discussion - why-browsers ignore autocomplete="off"

Answer 2

我发现包括-webkit-box-shadow和background-color在内的解决方案仅适用于谷歌Chrome浏览器，但不适用于Safari。对我有用的是添加background-clip: content-box。最后，代码（在所有浏览器中工作）看起来像：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}