HTML输入框input标签自动填充背景色如何取消?

星级:
HTML输入框input标签自动填充背景色可以通过CSS的autofill伪类修改取消,自动填充字体颜色则可以通过CSS的text-fill-color属性设置

HTML输入框input标签在自动填充时,浏览器一般默认会为input标签自动填充一种淡蓝色作为背景色。对于这种背景色,有些开发者喜欢,但也有很多开发者不喜欢。

对于喜欢这一特性的开发者而言,这倒没什么,但对于不喜欢这一特性的开发者而言,想要取消它却可能突然发现不知从哪里入手,因为普通的css中根本没学过这一特性。

【解决】

其实,在较高版本的浏览器当中,是存在控制HTML输入框input标签自动填充后背景色的控制的,这就是CSS的[ autofill伪类 ] 。以谷歌浏览器chrome为例,

input:-webkit-autofill {

transition: background-color 5000s ease-in-out 0s;
}

通过CSS的[ autofill伪类 ] 如上设置,那么页面上所有的自动填充input输入框在自动填充后,就不再会出现默认的背景色了。

另外,CSS还支持变更自动填充input输入框在自动填充后的字体颜色,设置方式如下:

input {

-webkit-text-fill-color: #0c3ce9; //颜色是设置成你需要的颜色
}