解决在chrome中input出现黄色背景的问题
2017-07-24 10:07
197 查看
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"); });
这种方法有可能解决字体设置颜色问题[code]
[/code]
相关文章推荐
- chrome表单自动填充导致input文本框背景变成偏黄色问题解决
- chrome表单自动填充导致input文本框背景变成偏黄色问题解决
- chrome表单自动填充导致input文本框背景变成偏黄色问题解决
- js解决chrome自动填写表单后input出现黄色背景的解决方案
- chrome中自动填充功能,背景出现黄色问题
- chrome自动填表会遮挡input中背景图的问题解决方法
- (前端开发)input标签在chrome下自动填充变成黄色背景的解决方法
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
- chrome输入框input黄色背景去除 及 autocomplete失效解决方法
- chrome自动填表会遮挡input中背景图的问题解决方法
- 解决chrome input 黄色背景色的问题
- 在chrome中自动完成表单后input出现黄色背景的解决方案
- 解决chrome浏览器表单自动填充导致input文本框背景变成偏黄色的问题
- 解决Vista/Server 2008/win 7 右下角网络连接出现黄色感叹号问题
- 【iOS-Cocos2d游戏开发之十八】解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!【2011年12月18日补充】
- Google浏览器记住密码造成input输入框黄色背景解决办法
- input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
- 解决chrome插件安装时出现的程序包无效问题
- 【iOS-Cocos2d游戏开发之十八】解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!
- Ubuntu安装chrome出现问题的解决办法