input输入框自动填充后默认样式修改

最近在做登录页时发现，当我们的账号名和密码被浏览器记住，自动填充以后，原本我们写好的input输入框的样式变了，特此记录：

---

这是设计的样子：

当账号密码自动填充以后：

字体颜色变了，背景色也变了，这时候我们就得修改：

input {
    
      
  background-color: #595959;  
}

input:-webkit-autofill {
    
    
  -webkit-text-fill-color: #fff;
  transition: background-color 50000s ease-in-out 0s;
}

解释：
① -webkit-text-fill-color 是填充颜色
② 可以自行百度transition的用法，这个意思就是50000秒以后再变回它默认的填充色，这个时间远远够了。

---

我查了其他人的写法是这样的：

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    
      
  -webkit-text-fill-color: #fff !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 {
    
      
  /* 下面这个色就是你设置的input框的背景色*/ 
  background-color: #595959;  
}

但是我认为只写我最开始写的那几行也就足够了，如果小伙伴们发现有其他用处，欢迎评论哦~