input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法

实践出真知，这话一点也不假，今天我在开发后台管理系统时，在 Chrome 谷歌浏览器中调试遇到的问题，这个问题在网络上其实早已经是老生常谈了，而且之前我也写过一篇关于这方面的解决办法，大家可以看一下《如何去掉 Chrome 浏览器中 input 表单默认的黄色背景》，但是呢还不完整，本文就算是进阶篇吧。就是谷歌浏览器登录页记住密码后下次登录会自动填充，并且有黄色背景。看看这个鸟样子：

这是怎么回事呢？原来 chrome 表单自动填充后，input 文本框的背景会变成偏黄色的，这是由于 chrome 会默认给自动填充的 input 表单加上 input:-webkit-autofill 私有属性，然后对其赋予以下样式：

input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
}

在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给 input 文本框使用图片背景的时候，原来的圆角和边框都被覆盖了。
第一种情况，input 文本框是纯色背景的，解决办法：可以对 input:-webkit-autofill 使用足够大的纯色内阴影来覆盖 input 输入框的黄色背景；如：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
}

如果你有使用圆角等属性，或者发现输入框的长度高度不太对，可以对其进行调整，除了 chrome 默认定义的 background-color，background-image，color 不能用!important 提升其优先级以外，其他的属性均可使用!important 提升其优先级，如：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
    height: 27px!important;
    line-height: 27px!important;
    border-radius: 0 4px 4px 0;
}

我的解决方法就是采用这一种，当然我也稍微修改了一下，如：

input:-webkit-autofill,input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	width: 196px;
        height: 44px;
	-webkit-box-shadow: 0 0 0px 1000px white inset;
	border-radius: 50px;
	border: none;
}

效果如下：

另外充一下：有时候谷歌浏览器、在记住密码后，通常会给用户密码输入框渲染上一个背景色，在有些时候这个浏览器自动使用的渲染背景色会影响系统本身的 UI 界面，所以下面提供 css 方法处理解决。

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: #ededed !important;
	-webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
    background-color:transparent;
    background-image: none;
     transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
}
input {
	 background-color:transparent;
}

第二种情况就是，我们有的同学将 input 文本框使用图片作为背景的，这个比较麻烦，目前还没找到完美的解决方法，期待聪明的你提供方案，我这里有两种选择：

1、如果你的图片背景不太复杂，只有一些简单的内阴影，那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景，此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果，那就只能牺牲 chrome 自动填充表单的功能，使用 js 去实现，例如：

$(function() {
  if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
      $(window).load(function(){
          $('ul input:not(input[type=submit])').each(function(){
              var outHtml = this.outerHTML;
              $(this).append(outHtml);
          });
      });
  }
});

遍历的对象可能要根据你的需求去调整。如果你不想使用 js，好吧，在 form 标签上直接关闭了表单的自动填充功能：autocomplete=”off”。

通过不断的实践，第一次打开页面文本框没有填充黄色背景，点击获得焦点后也没有填充黄色背景，算是达到了预期效果。

以上关于input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。