• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > chrome表单自动填充input黄色背景解决方案

chrome表单自动填充input黄色背景解决方案

作者:dnpao的专栏 字体:[增加 减小] 来源:互联网 时间:2017-08-02

本文主要包含chrome,表单等相关知识,dnpao的专栏希望在学习及工作中可以帮助到您

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

input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:

10094547

情景一: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”。

关于网上盛传的方法不奏效的一些测试
这个问题困扰了我挺长一段时间的,网上写的方法主要有2种:第一种是在样式里对input:-webkit-autofill重写background-color和color,使用!important提高其优先级。第二种是使用jQuery,先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。

但是我测试发现,这两种方法都不凑效!不知道是随着chrome版本的升级,现在的chrome(27)已经不支持重写input:-webkit-autofill原有的属性,还是怎么回事。另外js也无法获取到chrome自动填充的表单的value值,所以网上盛传的使用jquery解决的方法也是不凑效,最多也就只能去掉黄色背景,而自动填充的value却被移除了。chrome自动填充的表单的value值是存在DocumentFragment里的div中的,如果有哪位童鞋知道怎么获取chrome自动填充的表单的value值,还请指教一下。

您可能想查找下面的文章:

  • chrome表单自动填充input黄色背景解决方案
  • 使用CSS3制作一个简单的Chrome模拟器
  • 解决chrome浏览器中input背景透明问题
  • Google Chrome浏览器无法显示hover样式的解决方法
  • 为ie和chrome单独设置样式的方法
  • IE=edge,chrome=1的META信息详解
  • chrome居中但ie不居中的解决方法
  • Win7下Chrome字体渲染颜色太淡颜色不够黑的解决方法
  • chrome表单自动填充导致input文本框背景变成偏黄色问题解决
  • 解决中文版Chrome下网页不能显示小于12px字体

相关文章

  • 2017-08-06css 串联选择器和后代选择器介绍及示例
  • 2017-08-06css属性使用中的一些注意事项(实战经验)
  • 2017-08-06filter:drop-shadow有方向的阴影使用说明
  • 2017-08-06CSS加载失败原因的总结与分析
  • 2017-08-06css中 中文字体相关知识汇总
  • 2017-08-06使用CSS中的meta实现web定时刷新或跳转的方法
  • 2017-08-06利用css绘制三角形的方法及拓展
  • 2017-08-06Hack 只针对IE的写法
  • 2017-08-06将页脚固定在页面底部的CSS实战
  • 2017-08-06CSS中的背景部分编程学习教程

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 有关绝对定位的全面理解
    • IE, firefox竖向横向滚动条处理
    • 用css消除button/selcet等控件选中时的虚线框(让页面美观点)
    • css控制文字自动换行的实现方法
    • 深入剖析z-index属性
    • CSS框架开发指南
    • IE6不支持opacity半透明 BUG的解决方法
    • 全面了解css行高line-height的用法
    • 限制div高度当内容多了溢出时显示滚动条
    • 基于css3的属性transition制作菜单导航效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有