在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" 无法解决我的问题。

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

- Avinash

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。

我认为无法删除黄色背景，您只能在其上面放置另一个背景，这可能是一个错误，我从未找到解决方法。

- mdnfiras

Answer 2

我可能完全错误，但一个解决办法可能是每次更改输入的“name”属性（添加一个随机字符串），这样浏览器就不会将其识别为用户名字段，也不会触发自动更正。然后你可以使用substr()来剪切掉随机部分，或者将随机字符串作为表单字段传递，并使用它来组合POST数组名称

- Mdk