去除chrome缓存自带黄底背景：终极方案chrome浏览器会自动记录搜过的关键字，在你下次点击文本框准备输入的时候会以

原因

chrome浏览器会自动记录搜过的关键字，在你下次点击文本框准备输入的时候会以下拉框的形式列出搜索过的关键词，当你点选列表中的关键词后，选中的关键词会自动填充到文本框中，但是此时，文本框的背景却发生了变化，变成了偏黄色。

因为表单自动填充元素在chrome下会有一个默认样式（如上图），并且优先级最高，无法覆盖（!important也无法覆盖）

解决方案

如果input框的背景色也是白色的，比如上面的那张图，并且可以看出来input框的高度是38px，还有是哪个选择器让它变颜色了：input:-webkit-autofill，上面说了，你不可以改变背景颜色覆盖这个选择器的样式，!important也无法覆盖。那么只能用别的属性来达到目的了，box-shadow这个属性刚好可以满足需求。来看看语法：

由此图可见，第4个参数是控制这个阴影大小的，而一般都是外阴影，内阴影就是第6个参数来控制了。
那么可以用：

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

实测结果：

特殊情况

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

妥协

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

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

或者整个form：

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

覆盖这个样式

看到这可能有的童鞋就有疑问了，之前不是说不能覆盖吗，现在怎么又覆盖了，逗我玩呢！童鞋别着急，往下看↓↓↓↓↓↓
对了，input框的字体也会给你变黑。
先看看没覆盖之前的GIF图：

看看这个背景，太丑了，我感觉处女座应该完全忍受不了。
现在来说说正事!import虽然是覆盖不了，但是其实css3的动画animation里声明的规则和 !import声明的规则相比起来，最终生效的还是css3动画的，据我测试，可以用动画让input框背景为透明色，浏览器的默认样式就好像不存在一样。其实我之前的一篇博文里面就提到过：
css的选择器
实际效果：

back动画代码：

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

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