chrome浏览器表单自动填充,样式改变---webkit-autofill

项目中遇到问题设置了input的背景颜色 不知道为啥不起作用 

控制台也追踪不到 真是捉急

后来百度才知道

原来是谷歌浏览器  

input:-webkit-autofill, 
textarea:-webkit-autofill, 
select:-webkit-autofill  {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
依然不起作用

百度了下大部分网有的答案
关于background-color,可以使用 -webkit-box-shadow: 0 0 0px 1000px white inset;选取相近颜色将其覆盖,这个要求input是纯背景色的情况

不过,还有一个较好的方法是:

transition: background-color 5000s ease-in-out 0s;
没错,就是使用css3动画将其背景色变化的延迟时间尽可能的延长
关于字体颜色,我们可以使用-webkit-text-fill-color: #fff;来改变

终极解决方法,就是关闭浏览器的自动填充功能,这样就不用调样式了  (此处我试了  没有作用)

<input type="text" name="username" id="username" autocomplete="off" />

我最终设置

// 谷歌浏览器管理密码自动填充的颜色背景
  .el-input__inner:-webkit-autofill {
    box-shadow: inset 0px 100px #0b3584 ;
    -webkit-text-fill-color: #fff;
  }
完成效果

参考网址  https://blog.csdn.net/u012761510/article/details/79063354

原文地址:https://www.cnblogs.com/wdd-cindy/p/14875272.html