-webkit-autofill覆盖问题
-webkit-autofill overwrite issue(自动填充覆盖问题)是一个在Chrome浏览器中出现的问题。当用户启用自动填充功能时,在输入框中自动填充的内容会被默认的黄色背景覆盖,并且无法通过常规的CSS样式来修改。
这个问题的出现是由于Chrome浏览器默认为自动填充的内容添加了特定的样式,以帮助用户意识到这些值实际上是存储在浏览器中的。然而,这个默认样式无法被开发者自定义,导致无法改变自动填充内容的背景颜色和文字颜色。
为了解决这个问题,有开发者提出了一个创造性的解决方法。通过在输入框中添加一个内部的"strong"元素,并通过CSS样式来覆盖默认样式,从而改变自动填充内容的背景颜色和文字颜色。具体的CSS样式如下:
input:-webkit-autofill { -webkit-box-shadow:0 0 0 50px white inset; /* 将颜色更改为自定义的背景颜色 */ -webkit-text-fill-color: #333; } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px white inset;/*自定义的box-shadow*/ -webkit-text-fill-color: #333; }
这个解决方法被许多开发者认为是简单而有效的。然而,也有一些开发者对这种解决方法表示了质疑,认为这种方式类似于早期IE6的hack,而且谷歌并没有提供让设计师可以覆盖默认样式的参数,限制了开发者的自由。
-webkit-autofill overwrite issue是一个在Chrome浏览器中出现的自动填充覆盖问题。虽然谷歌提供了默认样式来帮助用户意识到自动填充内容的存在,但默认样式无法被开发者自定义。通过添加特定的CSS样式,开发者可以改变自动填充内容的背景颜色和文字颜色,以解决这个问题。然而,这种解决方法也引发了一些开发者对谷歌开发者决策的质疑。