清除Chrome浏览器下默认浅黄色背景(保存密码时出现)

当某个登录的页面我们保存密码之后,后面登录账户名和密码会自动填充,我们可以观察到,Chrome浏览器自动加了一层淡黄色的背景,如下图:
这里写图片描述

那么我们改如何清除默认的样式呢?

首先我们看到它默认的代码如下:
这里写图片描述
看到这个,是不是马上想到如下代码:

input:-webkit-autofill{
    background:#fff!important; //这里可以是你想要的任何颜色
}

但是你会发现,并没有任何效果,代码是被被我们的新样式覆盖掉了,但是效果依旧是浅黄色,忧伤呀!还有没有其他方式呢?
有的,看下面:

input:-webkit-autofill{
    box-shadow: 0 0 0 23px #fff inset !important;
}

这样就可以了,但是要注意两件事情:

  1. box-shadow的值必须是spread的值,也就是第四个数字
  2. 一定要加inset,将阴影改变为内侧阴影
  3. !important,因为浏览器默认加了!important,我们的权重必须高于默认的。
  4. spread值最小是input高度的一半

OK,这样就搞定了,效果如下:
这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值