chrome表单自动填充去掉input黄色背景解决方案
来源:互联网 发布:telnet远程端口 编辑:程序博客网 时间:2024/06/05 23:55
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文本框是使用图片背景的
这个比较麻烦,目前还
阅读全文