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

【问题标题】：How to change Safari autofill yellow background color如何更改 Safari 自动填充黄色背景颜色
【发布时间】：2017-06-11 19:34:20
【问题描述】：

这张图片是我从 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。调试工具显示用户代理样式表背景颜色已被划掉，但颜色仍然没有改变，并且正在使用自定义。

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

【问题讨论】：

不要认为您可以覆盖用户代理样式，尤其是标有!important
尝试预先使用类来寻址input，例如input.class { background-color: red !important }
@DenisTsoi 有什么理由提前解决input 类？
我相信特异性会有所帮助，但是使用 -webit-box-shadow 可以解决这个问题
取决于 :(、opera 和 safari 不会让您更改 自动填充。firefox、ie 和 chrome 都可以.

标签： javascript html css safari

【解决方案1】：

我发现包括-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;
}

【讨论】：

这对我来说是最好的答案。试图找到 Safari 的修复程序，但上述答案均无效。这个对我很有用，谢谢你救了我！

【解决方案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;
}

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

【讨论】：

感谢@Denis，这真的很有帮助。如果可以的话，我会关闭自动完成功能，这样可以节省我很多时间挖掘哈哈。