谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图
输入框原来的样式是这样的
![]
然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色
这是由于谷歌浏览器的自带样式的缘故:
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
如果我们想记住密码后仍然想要以前的颜色,可以用 设置input内阴影 的方式把黄色覆盖掉,css代码:
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
}
这样输入框就变成了
然而字体仍然是黑色的,如果想改变字体,则
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;
-webkit-text-fill-color: #666666;//设置字体颜色
}
屏蔽谷歌浏览器记住表单密码
解决谷歌浏览器表单记住密码引起的各种bug,记住密码后输入框看似有值,但使用js表单验证的时候却获取不到值,为了解决这个问题需要屏蔽浏览器的默认记住密码这一共能,代码如下:
$('#passwd').attr('type','text').focus(function(){
$(this).attr('type','password');
});
问题所在:
谷歌浏览器会自动填充密码,某方面是很方便,但是也会出现意想不到的效果,比如填充的颜色变成黄色,可能与设计不符,主要原因是浏览器给input加上了一个样式:
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0, 0); }
解决方法其一可以是覆盖浏览器的样式。但,我们可以尝试更加高大上的解决办法:
解决办法:
在旧版的谷歌浏览器中,可以使用以下方法:
1对于整个表单生效;
1
对于单个input生效;
在新版的谷歌浏览器中,autocomplete=”off”已经失效,需要尝试以下方法:
用法是在form表单的加入这两句代码,然后name需要改成将要禁止填充的input。其原理是,谷歌浏览器会自动填充这个input,而不会填充你代码中实际展示的input,从而绕过谷歌浏览器的自动填充功能;
(注:看别的内容记录下来)