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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
js读取本地文件的实例
Dec 22 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
js实现简单选项卡制作
Aug 05 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
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php中错误处理操作实例分析
2019/08/23 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
财务主管岗位职责
2014/02/28 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
导游经典开场白——导游词
2019/04/17 职场文书