坑一:
当自动填充数据后,输入框所展示的效果特别丑,会有自带的填充样式
解决方法: 可以修改:-webkit-autofill
中box-shadow
的属性去改变输入框自动填充的颜色
input:-webkit-autofill {
box-shadow: 0 0 0px 1000px #f8f8f8 inset !important;
}
可以看下修改完后的效果
注意: 如果需要使用透明色或者是有透明度的填充色,需要设置自动填充延迟才能生效
// 设置输入框自动填充的延迟属性
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 0px 1000px transparent inset !important;
}
坑二:
不想使用浏览器自动填充功能的时候,使用了autocomplete="off"
发现无效,浏览器还是自动填充了数据
解决方法: 在所有输入框前面加入<input type="password" hidden autocomplete="new-password" />
可以使它下面的输入框禁止自动填充