订阅汇聚素材网Feed

重置chrome表单黄色背景

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important;}

在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:

10094547

情景一:input文本框是纯色背景的

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:

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;   }

如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了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”。

8 人Likes
  

文章转载请注明:重置chrome表单黄色背景-汇聚素材网

本文固定链接:http://www.webhj.com/hj-2049.html  +复制链接

重置chrome表单黄色背景:等您坐沙发呢!

发表评论

*

*

9 + 3

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍