css - 如何在 chrome 自动完成上删除蓝色背景

Question

我正在制作一个表单并希望每个输入都是透明的，但是当我在 Chrome 中使用自动完成功能然后标签进入下一个字段时，前一个字段会变成淡蓝色背景。

我试过使用:

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
}  

但这不起作用。我不想要白色背景我希望在单击另一个输入并设置 color 时它保持透明至 transparent也不起作用。

如何做到这一点？

Answer 1

谷歌似乎对 shadow 属性做了一些魔法。这使它对我有用:

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 {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}