在做登陆页面时，碰到有浏览器记住用户名和密码可自动填充，但是样式不是很美观，用户体验也不太好，所以修改是必须的了，通过加伪类的方式修改input:-webkit-autofill，直接使用该方法并不能去掉默认的样式，使用!important提高权重也没有效果。查了些资料后，总结了一些方法可以使用，以便后期能派上用场：

1.通过纯色的阴影覆盖底色，使用:-webkit-auto属性：

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}

2.给input设置动画：

//通过延长增加自动填充背景色的方式, 使用户感受不到样式的变化
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

3.修改表单的子填充样式：

      通过给form表单设置autocomplete属性，如:

<form autocomplete="off">

   也可以给单个表单项设置，如：

<input type="text" autocomplete="off">

这种方法会限制用户的使用，建议用的不太多。

标签：填充,chrome,表单,样式,autofill,webkit,input,99999s
来源： https://blog.csdn.net/lilyheart1/article/details/115123491