黄色填充问题input
来源:互联网 发布:linux 编译动态库 编辑:程序博客网 时间:2024/06/07 22:30
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
遍历的对象可能要根据你的需求去调整。如果你不想使用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值,还请指教一下。
- 顶
- 黄色填充问题input
- 解决chrome浏览器表单自动填充导致input文本框背景变成偏黄色的问题
- chrome表单自动填充去掉input黄色背景解决方案
- 浏览器为已登录的input自动填充黄色背景
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- 取消chrome表单自动填充去掉input黄色背景解决方案
- input框自动填充内容背景颜色为黄色解决方法
- chrome表单自动填充input黄色背景解决方案
- input输入框自动填充的黄色背景简单办法
- input输入框自动填充黄色背景解决方案
- input框自动填充内容背景颜色为黄色解决方法
- chrome表单自动填充去掉input黄色背景解决方案
- chrome表单自动填充去掉input黄色背景解决方案
- 解决input自动填充问题
- chrome中自动填充功能,背景出现黄色问题
- (前端开发)input标签在chrome下自动填充变成黄色背景的解决方法
- 谷歌浏览器的input自动填充出现巨丑的黄色背景解决方案
- 跨浏览器的事件处理(套装)
- MySQL索引及查询优化总结
- Java线程池
- Java记事本
- Android Shape绘制实用圆圈,并动态改变圆点的颜色
- 黄色填充问题input
- 数据结构基础温故-1.线性表(上)
- 中国互联网乃至移动互联网发展最好的十个城市排名,我会这么排:北京,深圳,上海,杭州,广州,成都,武汉,南京,西安,厦门。
- centos7搭建gitlab(一)
- Spring Data MongoDB 六:进阶Aggregation操作(上)
- # 美团点评CodeM编程大赛-题三
- [Spark]Spark RDD 指南五 持久化
- 【Java并发编程】之一:可重入内置锁
- ultraedit 注册激活