当某个登录的页面我们保存密码之后,后面登录账户名和密码会自动填充,我们可以观察到,Chrome浏览器自动加了一层淡黄色的背景,如下图:
那么我们改如何清除默认的样式呢?
首先我们看到它默认的代码如下:
看到这个,是不是马上想到如下代码:
input:-webkit-autofill{
background:#fff!important; //这里可以是你想要的任何颜色
}
但是你会发现,并没有任何效果,代码是被被我们的新样式覆盖掉了,但是效果依旧是浅黄色,忧伤呀!还有没有其他方式呢?
有的,看下面:
input:-webkit-autofill{
box-shadow: 0 0 0 23px #fff inset !important;
}
这样就可以了,但是要注意两件事情:
box-shadow
的值必须是spread的值,也就是第四个数字- 一定要加inset,将阴影改变为内侧阴影
- 加
!important
,因为浏览器默认加了!important
,我们的权重必须高于默认的。 - spread值最小是input高度的一半
OK,这样就搞定了,效果如下: