更改输入自动填充样式答案

【问题标题】：change input autofill styling更改输入自动填充样式
【发布时间】：2020-10-24 16:43:43
【问题描述】：

我的输入具有白色背景和深色文本，但是当我键入并且浏览器自动完成时，样式会发生变化。我知道浏览器会这样做，并且我已经在 Chrome 上找到了它的修复程序，但在 Safari 和 Firefox 上却没有。在 safari 上，文本仍然变成白色（奇怪的是变成了我第二次保存文本编辑器时写的颜色）。 Firfox 仍然使背景变黄。这是我当前的输入代码。

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:hover {
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  // background-color: red !important;
  // background-clip: content-box !important;
  -webkit-text-fill-color: #002169 !important;
  font-family: 'Europa';
}

【问题讨论】：

标签： css input autocomplete autofill

【解决方案1】：

您可以使用 :-webkit-autofill 设置自动填充输入的样式

即使在带有 webkit-prefix 的 Firefox 中！

要更改背景颜色，可以使用 box-shadow 技巧。
对于 Firefox，您还需要 filter:none。

:-webkit-autofill { 
    filter:none; /* needed for firefox! */
    box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}

我不知道这如何以及是否适用于 Safari。

【讨论】：