html - 地址自动填充时如何更改输入字段样式

Question

我已经在我的 chrome 浏览器中存储了地址，所以当我填写表格时，我会看到这样的弹出窗口：

当我选择一个地址时，输入字段会变成蓝色，如下所示：

如何更改 CSS，以使输入字段不会变蓝。我已经尝试了下面的代码，但没有奏效：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: transparent;
}

标签： htmlcssgoogle-chromeautofill

Answer 1

当您选择自动填充建议时，您无法进行透明输入，但您可以在自动填充建议后使用以下 CSS 更改输入字段的颜色：

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

您可以更改自动填充建议的文本颜色：

input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}