chrome 表单自动填充后,input文本框的背景会变成黄色的。通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,如下图所示:
解决方式:可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景,如下所示:input:-webkit-autofill{ -webkit-box-shadow:0px 0px 0px 100px white inset; }
输出结果如下:
输入框的默认黄色即变成白色了。
其中的扩展半径,即上面的100px一定要大于输入框的高度,这个值具体情况具体设。
如果内阴影颜色不是纯色的话,则设置的效果无效。注意:内阴影的颜色一定是纯色。
有的时候,按照上面方法设置无效,此时可以结合上面的方法,并且将input的type=password的输入框的类型定义为text,当点击该密码输入框的时候,在讲其属性设为password。如下面代码所示:这是html:<input class="input1 customInput" id="signup_password" name="signup_password" type="text" placeholder="密码" autocomplete="off" />
$("#signup_password).click(function(){ $(this).attr("type","password"); });然后设置密码输入框的点击事件:
这种方法有可能解决字体设置颜色问题
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。