码云笔记前端博客
Home > 前端技术 > input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法

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

2019-09-05 分类:前端技术 作者:码云 阅读(90)

本文共计2218个字,预计阅读时长需要6分钟。

实践出真知,这话一点也不假,今天我在开发后台管理系统时,在Chrome谷歌浏览器中调试遇到的问题,这个问题在网络上其实早已经是老生常谈了,而且之前我也写过一篇关于这方面的解决办法,大家可以看一下《如何去掉Chrome浏览器中input表单默认的黄色背景》,但是呢还不完整,本文就算是进阶篇吧。就是谷歌浏览器登录页记住密码后下次登录会自动填充,并且有黄色背景。看看这个鸟样子:
input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法
这是怎么回事呢?原来chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

1
2
3
4
5
input:-webkit-autofill {
    background-color: #FAFFBD;
   background-image: none;
    color: #000;
}

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

1
2
3
4
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提升其优先级,如:

1
2
3
4
5
6
7
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;
}

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

1
2
3
4
5
6
7
8
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;
}

效果如下:
input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法
另外充一下:有时候谷歌浏览器、在记住密码后,通常会给用户密码输入框渲染上一个背景色,在有些时候这个浏览器自动使用的渲染背景色会影响系统本身的UI界面,所以下面提供css方法处理解决。

1
2
3
4
5
6
7
8
9
10
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去实现,例如:

1
2
3
4
5
6
7
8
9
10
$(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浏览器中自动填充默认的黄色背景去除方法

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - input文本框在Chrome浏览器中自动填充默认的黄色背景去除方法

博客简介

码云笔记网 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记网有你更精彩!
更多博客详情请看关于博客

精彩评论