input输入框autofill自动变成黄色

在做项目的时候发现苹果手机的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，一般用户不会等很久所以也就不会看到变色背景。

方法三

（该方法未实践）
修改input框的填充颜色，可以填充为任意颜色，但transparent在这里不起作用：

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 500px white inset !important;
}

另外，也可以修改文字的颜色：

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
}

参考：
https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete