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 相关文章推荐
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
Html5生成验证码的示例代码
May 10 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
JS设计模式之单例模式(一)
2017/09/29 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python自定义类并使用的方法
2015/05/07 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
银行介绍信范文
2014/01/10 职场文书
财务主管自我鉴定
2014/01/17 职场文书
金融保险专业求职信
2014/09/03 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python