在我们的登录时为了方便通常会记住密码，同时浏览器也会通过自动填充将数据写入到输入框中。这里就会出现一个问题，自动填充后的输入框会多出背景颜色，如下所示：

如果想要修改该背景或者添加自定义样式，可以使用:autofill伪类来设置自动填充样式。MDN-autofill 将背景设置成transparent时需要借助transition来延迟设置背景，避免被浏览器默认样式覆盖。

input:autofill {
  background-color: transparent !important;  
  transition: background-color 50000s ease-in-out 0s;
}
input:-webkit-autofill {
  background-color: transparent !important;  
  transition: background-color 50000s ease-in-out 0s;
}

如果想要设置自定义颜色时，使用background-color是不生效的

input:autofill {
  /* 不生效 */
  background-color: red !important;  
  transition: background-color 50000s ease-in-out 0s;
}

这里我们需要借助box-shadow来实现背景颜色，代码如下：

input:autofill {
  box-shadow: 0 0 0px 1000px red  inset !important; 
  -webkit-box-shadow: 0 0 0px 1000px red  inset !important; 
}

同样直接使用color也是无法设置字体颜色，这里同样我们需要借助特殊属性-webkit-text-fill-color来设置颜色

input:autofill {
  -webkit-text-fill-color: blue !important;
}