input输入框自动填充样式丢失 - 解决方法

坑一：

当自动填充数据后，输入框所展示的效果特别丑，会有自带的填充样式

image.png

解决方法： 可以修改:-webkit-autofill中box-shadow的属性去改变输入框自动填充的颜色

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

可以看下修改完后的效果

image.png

注意： 如果需要使用透明色或者是有透明度的填充色，需要设置自动填充延迟才能生效

// 设置输入框自动填充的延迟属性
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;
}
// 设置填充色为透明
input:-webkit-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
}

坑二:

不想使用浏览器自动填充功能的时候，使用了autocomplete="off"发现无效，浏览器还是自动填充了数据

解决方法： 在所有输入框前面加入<input type="password" hidden autocomplete="new-password" />可以使它下面的输入框禁止自动填充