-webkit-autofill覆盖问题

13 浏览
0 Comments

-webkit-autofill覆盖问题

我有两个基本表单:登录和注册,都在同一页上。现在,登录表单自动填充没有问题,但注册表单也自动填充了,我不喜欢这样。另外,表单样式有一个黄色的背景,我无法覆盖它,也不想使用内联CSS来处理。我该怎么做才能让它们不再显示黄色背景?

0
0 Comments

-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样式,开发者可以改变自动填充内容的背景颜色和文字颜色,以解决这个问题。然而,这种解决方法也引发了一些开发者对谷歌开发者决策的质疑。

0