在我正在处理的一个表单上,Chrome会自动填写电子邮件和密码字段。这是好的,但是,Chrome改变背景颜色为淡黄色。

我正在做的设计是在深色背景上使用浅色文本,所以这真的会破坏表单的外观——我有鲜明的黄色框和几乎看不见的白色文本。一旦聚焦了场,场就会恢复正常。

有可能阻止Chrome改变这些字段的颜色吗?


当前回答

可以改变这个盒子的颜色,就像已接受的答案一样。

但是如果你想让背景透明,这个方法是没有用的。然而,有一种方法(或者更确切地说是变通方法)可以让它透明,就像这样:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

这基本上相当于透明背景。

其他回答

除此之外:

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

你可能还想补充

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

另一方面,当你点击输入时,黄色会回来。 对于焦点,如果你使用bootstrap,第二部分是用于边界突出显示0 0 8px rgba(82, 168, 236, 0.6);

这样它看起来就像任何自举输入。

你可以改变输入框的样式以及输入框内的文本样式:

在这里你可以使用任何颜色,例如白色,#DDD, rgba(102, 163, 177, 0.45)。

但透明在这里行不通。

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

另外,你可以用它来改变文本的颜色:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

建议:不要使用过多的模糊半径在数百或数千。这没有任何好处,而且可能会将处理器负载放在较弱的移动设备上。(也适用于实际的外部阴影)。对于一个普通的20px高度的输入框,30px的“模糊半径”将完美地覆盖它。

2023 -透明背景

对于深色背景上的透明输入背景(浅色文本):

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #ffffff;
}

可以改变这个盒子的颜色,就像已接受的答案一样。

但是如果你想让背景透明,这个方法是没有用的。然而,有一种方法(或者更确切地说是变通方法)可以让它透明,就像这样:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s;
    -webkit-text-fill-color: #fff !important;
}

这基本上相当于透明背景。

我有一个纯CSS解决方案,使用CSS过滤器。

filter: grayscale(100%) brightness(110%);

灰度滤镜将黄色替换为灰色,然后亮度删除灰色。

看到CODEPEN