html - 删除 Chrome 中的黄色输入背景以实现透明输入

Question

首先，我知道有关 Chrome 黄色输入背景问题的问题已被问过多次，并且提供了很多方法来覆盖它。

但我无法让它为我工作，因为我的表单具有透明输入。

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

上面的代码非常适合将输入颜色设为白色，但是当我给出以下代码时，它会给出黄色作为背景。

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset;
}

有没有办法解决这个问题。表单上的 autocomplete="off" 也不能解决我的问题。

在没有名称属性的输入字段之前添加一个隐藏的输入会删除黄色，但是当我输入用户名时，输入背景会变回黄色。

Answer 1

chrome 中的自动完成输入始终具有黄色背景。

通过使用 -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.1) inset; 您可以在顶部放置一个可见度为 10% 的黑色背景黄色背景，这将导致黄色背景稍微深一点。

并且通过使用 -webkit-box-shadow: 0 0 0px 1000px transparent inset; 你在黄色背景之上放置了一个透明背景，这绝对不会改变任何东西。

您可以接受这些结果或使用 100% 可见的颜色，例如 black、rgb(255, 255, 255)、rgba(255, 255 , 255, 1) 或 #000000

我认为黄色背景无法移除，只能在其上放置另一个，我认为这是一个错误，我一直没有找到解决方案。