去掉chrome记住密码后自动填充表单的黄色背景
来源:互联网 发布:手机淘宝能发布食品吗? 编辑:程序博客网 时间:2024/05/22 17:41
chrome 表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
- input : -webkit-autofill {
- background-color : #FAFFBD ;
- background-image : none ;
- color : #000 ;
- }
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:
- input : -webkit-autofill {
- -webkit-box-shadow : 0 0 0px 1000px white inset ;
- border : 1px solid #CCC !important ;
- }
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
- input : -webkit-autofill {
- -webkit-box-shadow : 0 0 0px 1000px white inset ;
- border : 1px solid #CCC !important ;
- height : 27px !important ;
- line-height : 27px !important ;
- border-radius : 0 4px 4px 0 ;
- }
情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用 js去实现,例如:
- $ ( function () {
- if ( navigator . userAgent . toLowerCase (). indexOf ( "chrome" ) >= 0 ) {
- $ ( window ). load ( function (){
- $ ( 'ul input:not(input[type=submit])' ). each ( function (){
- var outHtml = this . outerHTML ;
- $ ( this ). append ( outHtml );
- });
- });
- }
- });
遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete="off"。
上面是在网上找到的一些方法,我是用的图片背景,经过实验如果用js的方法会导致提交表单的时候重置而无法将value传过去,没办法只能是将自动填充的功能关闭了,虽然影响了部分用户的体验,但是解决了黄色背景影响整体UI的问题
- 去掉chrome记住密码后自动填充表单的黄色背景
- 去掉chrome记住密码后自动填充表单的黄色背景
- 去掉chrome记住密码后自动填充表单的黄色背景
- 【修改谷歌浏览器chrome记住密码后自动填充表单的黄色背景】
- <开发>chrome表单自动填充后,去掉黄色背景
- chrome下记住密码后去掉黄色背景的方法
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- 取消chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- 去掉chrome记住密码后的默认填充样式
- Chrome浏览器自动填充的表单如何去掉淡黄色背景???
- chrome表单自动填充input黄色背景解决方案
- Html+CSS 疑难杂症一 Chrome记住密码后黄色背景 的解决方法
- 解决chrome浏览器表单自动填充导致input文本框背景变成偏黄色的问题
- 禁止表单记住密码自动填充
- Android开发集成科大讯飞语音识别+语音合成功能
- 人物丨深度学习大神Hinton推翻自己30年的学术成果另造新世界
- EventBus源码解析(史上最全的源码解析)
- 动态字符串%d %s ------android String
- 心得丨如何快速上手疯狂上涨的Python?
- 去掉chrome记住密码后自动填充表单的黄色背景
- iOS编程思想
- python datetime 常用的几种处理日期的方式
- 福利丨微信公众号“人工智能爱好者俱乐部”留言赠书活动结果公布(第三季)
- SpringMVC和Struts2的比较的优点
- 人体电容效应
- 欢迎使用CSDN-markdown编辑器
- 【预警通告】Oracle身份管理器漏洞
- Spring MVC 常用Jar包官方下载地址(官方Maven仓库)