html input自动填充,记录下input输入框自动填充的坑，附带解决方法

记录下input输入框自动填充的坑，附带解决方法

记录下input输入框自动填充的坑，附带解决方法

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

解决方法： 可以修改:-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"发现无效，浏览器还是自动填充了数据

解决方法： 在所有输入框前面加入可以使它下面的输入框禁止自动填充

参考：https://segmentfault.com/a/1190000016940405

记录下input输入框自动填充的坑，附带解决方法相关教程