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

Question

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

虽然这是我的代码:

资料来源:

如何删除WebKit的香蕉黄色自动填充背景

删除Chrome中的强制黄色输入背景 - 即使它说镀铬但仍然指向webkit-autofill

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

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

Answer 1

我发现的是，这些解决方案包括-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;
}

Answer 2

正在阅读大多数浏览器想要指示自动填充(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;
}

来源:
- 中 - 后
- stackoverflow讨论
- 为什么 - 浏览器忽略autocomplete ="off"