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 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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
PHP开发文件系统实例讲解
2006/10/09 PHP
一次编写,随处运行
2006/10/09 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python交互式图形编程实例(二)
2017/11/17 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
python实现flappy bird游戏
2018/12/24 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python PyQt5整理介绍
2020/04/01 Python
python中有帮助函数吗
2020/06/19 Python
解决python对齐错误的方法
2020/07/16 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
幼儿园老师寄语
2014/04/03 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Pandas搭配lambda组合使用详解
2022/01/22 Python