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

Question

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

虽然这是我的代码：

来源：

How to Remove WebKit's Banana-Yellow Autofill Background

Remove forced yellow input background in 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在内的解决方案只能在Google 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;
}