Question

我输入的内容具有白色背景和深色文本，但是当我键入内容并且浏览器自动完成时，样式也会更改。我知道浏览器会执行此操作，并且我已经在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';
}

Answer 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。

更改输入自动填充样式

1 个答案: