JS中解决谷歌浏览器记住密码输入框颜色改变功能


Posted in Javascript onFebruary 13, 2017

谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图

输入框原来的样式是这样的

JS中解决谷歌浏览器记住密码输入框颜色改变功能

然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色

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;
}

这样输入框就变成了

JS中解决谷歌浏览器记住密码输入框颜色改变功能

然而字体仍然是黑色的,如果想改变字体,则

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;

-webkit-text-fill-color: #666666;//设置字体颜色
}

JS中解决谷歌浏览器记住密码输入框颜色改变功能

屏蔽谷歌浏览器记住表单密码

解决谷歌浏览器表单记住密码引起的各种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中解决谷歌浏览器记住密码输入框颜色改变功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
判断ie的两种简单方法
Aug 12 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
You might like
图解上海144收音机
2021/03/02 无线电
PHP4实际应用经验篇(2)
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
discuz目录文件资料汇总
2014/12/30 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
js数组的操作详解
2013/03/27 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js实现日历的简单算法
2017/01/24 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
求职意向书
2014/04/01 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL