#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景

#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景

google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体。如下图。

这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景。

首先来看看是什么导致的,右键查看元素样式:

input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{

  rgb(250, 255, 189);

  background-image: none;

  color: rgb(0, 0, 0);

}

一目了然了,-webkit-autofill重新渲染了input的背景色及字体颜色。

ok,原因找到了,解决方法也有了,重写-webkit-autofill

1, Not working (不起效果)

input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{

  rgb(255, 255, 255);

  background-image: none;

  color: rgb(102, 102, 102);

}

2,  Not working(不起效果)

input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{

  rgb(255, 255, 255) !important;

  background-image: none !important;

  color: rgb(102, 102, 102) !important;

}

3, working(起效果)

input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{

  -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #666;

}

ok 表单的黄色填充颜色没有了,

原文地址:https://www.cnblogs.com/yaomengli/p/9376418.html

时间: 2024-07-30 10:46:56

#-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景的相关文章

#-webkit-autofill##google#启用表单自动填充时,如果覆盖黄色背景

google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ background-color: rgb(250, 255, 189); background-image: none; color: rg

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,

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

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框

用户登录记住用户名导致表单自动填充bug解决方法

最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一个bug,想了几种解决办法: 方法一:利用html5表单新增属性 autocomplete="off",刷新后尝试,并没有卵用: 方法二:利用js来控制,进入页面时,给input表单设置value为空,心想这下可以了吧,结果还是没毛用: 方法三:给input表单设置只读属性 readonl

解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题

如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!important的方法也无法去除. 解决方法一: 取消设置input表单的autofocus属性 解决方法二:对于没有背景图片的元素,添加下面的代码: input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; } 解决方法三: 对于有背景图

防止表单自动填充用户名和密码

部分浏览器支持:autocomplete="off" 所以浏览器支持: 在会自动填充的from内加下面两家代码 <input style="display:none" type="text" name="fakeusernameremembered"/> <input style="display:none" type="password" name="fak

去除chome表单自动填充样式

CSS: input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { /* 延迟动画 */ -webkit-transition-delay: 9999s; transition-delay: 9999s; -webkit-transition: color 9999s ease-out, background-color 9

表单自动提交问题整理

表单自动提交问题 问题描述 二是利用了浏览器的默认行为(至少发现ie是这样的).浏览器在解析网页的时候,有许多默认的行为,例如: * 如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面. * 同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单. 我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默