去除chrome缓存自带黄底背景:终极方案

css a'ゞ『完美』 2年前 (2017-02-16) 2576次浏览 已收录 3个评论 扫描二维码

原因

chrome 浏览器会自动记录搜过的关键字,在你下次点击文本框准备输入的时候会以下拉框的形式列出搜索过的关键词,当你点选列表中的关键词后,选中的关键词会自动填充到文本框中,但是此时,文本框的背景却发生了变化,变成了偏黄色。
去除 chrome 缓存自带黄底背景:终极方案
因为表单自动填充元素在 chrome 下会有一个默认样式 (如上图),并且优先级最高,无法覆盖(!important 也无法覆盖)

解决方案

如果 input 框的背景色也是白色的,比如上面的那张图,并且可以看出来 input 框的高度是 38px,还有是哪个选择器让它变颜色了:input:-webkit-autofill,上面说了,你不可以改变背景颜色覆盖这个选择器的样式,!important 也无法覆盖。那么只能用别的属性来达到目的了,box-shadow这个属性刚好可以满足需求。来看看语法:
去除 chrome 缓存自带黄底背景:终极方案
由此图可见,第 4 个参数是控制这个阴影大小的,而一般都是外阴影,内阴影就是第 6 个参数来控制了。
那么可以用:

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

实测结果:
去除 chrome 缓存自带黄底背景:终极方案

特殊情况

平时一般的 input 框背景大都是白色的,但也有些例外情况,比如 input 框背景色是透明的,或者它的容器有背景图片,这种情况,box-shadow 的方案显然不太适合。
我这里有两种方案:

妥协

如果背景色是透明的,也没有背景图片,那么向浏览器妥协,不让它缓存这些记录。
input 不自动缓存可以用:

<input type="text" autocomplete=“off" />

或者整个 form:

<form autocomplete=“off"></form>

覆盖这个样式

看到这可能有的童鞋就有疑问了,之前不是说不能覆盖吗,现在怎么又覆盖了,逗我玩呢!童鞋别着急,往下看↓↓↓↓↓↓
对了,input 框的字体也会给你变黑。
先看看没覆盖之前的 GIF 图:
去除 chrome 缓存自带黄底背景:终极方案
看看这个背景,太丑了,我感觉处女座应该完全忍受不了。
现在来说说正事!import 虽然是覆盖不了,但是其实 css3 的动画 animation 里声明的规则和 !import 声明的规则相比起来,最终生效的还是 css3 动画的,据我测试,可以用动画让 input 框背景为透明色,浏览器的默认样式就好像不存在一样。其实我之前的一篇博文里面就提到过:
css 的选择器
实际效果:
去除 chrome 缓存自带黄底背景:终极方案
back 动画代码:

@keyframes back{
      0%{background-color:transparent;color:#fff;}
    100%{background-color:transparent;color:#fff;}
}

之前一直没地方用到这个小技巧,这次终于用到了。开心^_^


a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明去除 chrome 缓存自带黄底背景:终极方案
喜欢 (26)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 我的chrome都没出现你说的黄色背景啊
    匿名2017-03-20 16:41 回复 Windows 10 | Chrome 55.0.2883.75
  2. 完美大神
    abc2017-02-17 11:54 回复 Windows 7 | Chrome 55.0.2883.87
  3. 完美大神
    泡菜2017-02-16 21:40 回复 Windows 7 | Chrome 45.0.2454.101