去掉chrome记住密码后自动填充表单的黄色背景
chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #;
}
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:
input:-webkit-autofill {
-webkit-box-shadow: 0px 1000px white inset;
border: 1px solid #CCC!important;
}
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
input:-webkit-autofill {
-webkit-box-shadow: 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 4px 4px ;
}
情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= ) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});
遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete="off"。
上面是在网上找到的一些方法,我是用的图片背景,经过实验如果用js的方法会导致提交表单的时候重置而无法将value传过去,没办法只能是将自动填充的功能关闭了,虽然影响了部分用户的体验,但是解决了黄色背景影响整体UI的问题
去掉chrome记住密码后自动填充表单的黄色背景的更多相关文章
- 如何修改chrome记住密码后自动填充表单的黄色背景 ?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(2 ...
- selenium如何解决IE自动填充表单问题
有时候用selenium会碰到自动填充表单的问题,如输入用户名后,密码自动填充,此时再填充密码会导致登录失败,解决办法:每个输入框都调用clear()方法
- java 传入用户名和密码并自动提交表单实现登录到其他系统
不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import ...
- 禁止chrome浏览器自动填充表单的解决方案
经过测试,对chrome42,重写input: auto-fill样式不起作用,加上autocomplete="off"也不起作用. 因此使用了两个隐藏的输入框: <inpu ...
- 浏览器记住密码的自动填充Input问题完美解决方案
1.input 前from和input占位隐藏 <form style="width:0;height:0;display:none;"> <input type ...
- input标签在谷歌浏览器记住密码的自动填充问题
//使用autocomplete="new-password" <Input type='password' autocomplete="new-password& ...
- 去除 chrome 上保存密码后的 input 框的屎黄色背景
网上找的设置 background-color,background-image 没用,后来找到这个方法测试有效: input:-webkit-autofill { transition: backg ...
- 修改form表单的黄色背景
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
- 记住密码后,密码框Password会自动带出数据
一般登陆之后浏览器会询问是否记住密码,如果把密码记住在浏览器上,下次登陆的时候浏览器会把用户名和密码自动填充到登录页面.前段时间服务站平台的员工账号模块提测后,测试提出360浏览器记住密码后会自用把登 ...
随机推荐
- cocos2d-x游戏开发系列教程-坦克大战游戏之子弹和地图碰撞
上篇文章实现了坦克与地图碰撞的检测, 这篇我们继续完成子弹和地图的碰撞检测. 1.先设计一个子弹类Bullet,如下所示: class Bullet : public CCSprite { publi ...
- ubuntu: root用户
ubuntu怎么设置root用户 http://blog.csdn.net/chenping314159/article/details/7561339 创建root帐号: 在安装系统时,root账 ...
- js中使用jstl中得到的值
jstl的标签会转化为服务器端的代码执行,而js代码则在客户端执行. 要在js中使用jstl并不是直接将jstl的value赋值给一个js的变量,而是要在jstl的value上加上&qu ...
- js注册检测 用户名、密码、手机号、邮箱
请输入电话号码:<input name="" type="text" id="telphone" value="" ...
- C# 中 双问号??的用法
int? x = null;int y = x ?? -1; 这里的y不能为null,但是等于x,x为null时赋值给y会报错.?? 可以在x==null时对y赋值-1 更多相关资料:https:// ...
- VS2008下直接安装使用Boost库1.46.1版本
Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容.在C++ ...
- MYSQL获取自增主键【4种方法】
通常我们在应用中对mysql执行了insert操作后,需要获取插入记录的自增主键.本文将介绍java环境下的4种方法获取insert后的记录主键auto_increment的值: 通过JDBC2.0提 ...
- Google 开源项目风格指南阅读笔记(C++版)
虽说是编程风格指南,可是干货也不少,非常多C++的有用技术在里面. 头文件 通常每一个.cpp文件都相应一个.h文件:#define保护全部头文件都应该使用#define防止头文件被多重包括,为保证唯 ...
- Android手势识别 Camera 预览界面上显示文字 布局注意事项(merge布局)
通常在Surfaceview作为预览视频帧的载体,有时需在上面显示提示文字.曾经我弄的都好好的.今天忽然发现叠加的TextView不管咋弄都出不来文字了,跟Surfaceview一起放在FrameLa ...
- MongoDB系列之三(副本集配置)
今天我测试了一下MongoDB的副本集的配置. 首先从概念上说一下MongoDB副本集和主从复制的区别.其实副本集(Replica Set)是主从复制的高级形式.高级在哪里呢?主动复制实现了数据备份+ ...