美文网首页
input输入框autofill自动变成黄色

input输入框autofill自动变成黄色

作者: 小螃蟹_5f4c | 来源:发表于2019-12-26 10:37 被阅读0次

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


image.png

在之前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

相关文章

网友评论

      本文标题:input输入框autofill自动变成黄色

      本文链接:https://www.haomeiwen.com/subject/rcjkoctx.html