JS中解决谷歌浏览器记住密码输入框颜色改变功能
更新时间：2017年02月13日 11:49:19 作者：路人桑
这篇文章主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
谷歌浏览器记住密码输入框颜色会改变，并且字体颜色会变成黑色，如图
输入框原来的样式是这样的
然而记住密码后，输入框颜色就变成了黄色，并且字体变成了黑色
这是由于谷歌浏览器的自带样式的缘故：
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表单验证的时候却获取不到值，为了解决这个问题需要屏蔽浏览器的默认记住密码这一共能，代码如下：
<input id="loginname" type="text" placeholder="手机号" autocomplete="off">
<input id="passwd" type="password" placeholder="密码" autocomplete="off">
<script>
$('#passwd').attr('type','text').focus(function(){
$(this).attr('type','password');
});
</script>
以上所述是小编给大家介绍的JS中解决谷歌浏览器记住密码输入框颜色改变功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在TypeScript里面,也会遇到需要遍历对象的时候,下面这篇文章主要给大家介绍了关于如何在TypeScript中正确的遍历一个对象的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Javascript进制转换方法,实例分析了javascript实现进制转换的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了用js实现读取文件流并下载到本地的方法,也就是我们经常说的使用js下载文件需要的朋友可以参考下2022-12-12
当在使用流程的时候，比如有一个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显示，当显示时，是以动画的形式显示的。下面通过代码给大家介绍JS实现带动画效果的流程进度条，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要介绍了原生JavaScript实现滑动拖动验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript手写call,apply,bind方法，call，bind，apply方法都是JavaScript原生的方法，挂载在Function原型上,使得所有函数都可以调用2022-06-06
uniapp是一个支持多端的技术,因此它是兼容性比较强的,而且速度也很快,下面这篇文章主要给大家介绍了关于uniapp微信小程序左上角返回按钮监听的相关资料,需要的朋友可以参考下2022-04-04
本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
Bootstrap组件福利大放送，这篇文章主要为大家推荐了几款好用的Bootstrap组件，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论