在做项目的时候发现苹果手机的safari浏览器下 如果在点击软键盘上的验证码自动填充之后输入框input就会自动变成黄色
查询原因如下:浏览器会自动加上

在之前input输入框有记录的情况下,会出现自动填充输入框背景颜色变成如上黄色,最简单的方法是禁止输入框自动填充。
<input type="text" autocomplete="off">
但是有时候的情况是需要保留这个属性。解决方法之一是看如下代码:
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输入框一个时间很长的delay,一般用户不会等很久所以也就不会看到变色背景。这也是我最常用的方法
在网上搜索的另一个办法我这里没有用
-webkit-box-shadow: 0 0 0 1000px white inset;
参考自:https://blog.csdn.net/topic2333/article/details/78862078
网友评论