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 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
利用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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python如何读写json数据
2018/03/21 Python
python读取各种文件数据方法解析
2018/12/29 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python从Oracle读取数据生成图表
2020/10/14 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
个人简历自我评价范文
2014/02/04 职场文书
核心价值观演讲稿
2014/05/13 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
白银帝国观后感
2015/06/17 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL