chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
参考blog来自 http://segmentfault.com/q/1010000000671971
chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
一、发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来。
这个原因是我草率的直接设置在input
元素里面,结果问题就来了。所以如果把这个图标放在input表单外面,就不会出现这个问题。
二、表单自动填充会添加浏览器默认样式怎么处理和避免
第二张图,就是表单自动填充后,chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
看到这里添加上这段代码,我会想到使用样式覆盖的方法解决。我完全可以使用!important去提升优先级。但是有个问题,加!important不能覆盖原有的背景、字体颜色,除了chrome默认定义background-color,background-images,color不能使用
!important提升优先级,其他属性均可使用它来提升优先级。
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #FFFFFF;
background-image: none;
color: #333;
/* -webkit-text-fill-color: red; //这个私有属性是有效的 */
}
input:-webkit-autofill:hover {
/* style code */
}
input:-webkit-autofill:focus {
/* style code */
}
思路有两个,1、通过打补丁,修复bug。2、关闭浏览器自带填充表单功能
情景一:input文本框是纯色背景的
解决办法: input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}
情景二:input文本框是使用图片背景的
解决办法: if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function () {
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0) {
window.clearInterval(_interval); // 停止轮询
autofills.each(function() {
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。 这个方法没效果!!
所以最后我是不使用图标作为input表单的背景图片,而是多写一个标签,把图标拿到表单外面来。
思路二: 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on"
关闭自动填充表单,自己实现记住密码
<!-- 对整个表单设置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或对单一元素设置 -->
<input type="text" name="textboxname" autocomplete="off">
如图:未自动填充前,此时这个邮箱的小图标是inpu表单的背景图片
如图:填充后,邮箱小图标被浏览器默认样式覆盖掉
最后,
如果不想多去处理chrome浏览器下表单自动填充出现的添加默认样式,那就把这个小小的图标放到表单外面吧,我这个因为是input框
只有border-bottom,如果这个input框有边框,那么可能需要使用一个div的边框的来假装成input框的边框,然后input框弄成是没有边框的。
像这样的input框
chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。的更多相关文章
- 去除表单自动填充时,-webkit浏览器默认给文本框加的黄色背景
input:-webkit-autofill { -webkit-box-shadow:inset 0 0 0 100px #2B2B35 inset; -webkit-text-fill-color ...
- #-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景
google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素 ...
- Chrome浏览器,处理input自动填充时带黄色背景色
/*Chrome浏览器打开网页,input自动赋值时,会带上屎黄色的背景色,下面是通过延长增加自动填充背景色的方式, 让用户感受不到样式的变化*/ input:-webkit-autofill, in ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- input placeholder 在chrome 浏览器自动填充时,背景色覆盖原有背景图片问题。
user-block-name, .user-block-pwd { margin-bottom: 10%; text-align: center; position: relative; } .us ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
- form表单 一个input时 回车自动提交
问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...
- springboot——重定向解决刷新浏览器造成表单重复提交的问题(超详细)
原因:造成表单重复提交的原因是当我们刷新浏览器的时候,浏览器会发送上一次提交的请求.由于上一次提交的请求方式为post,刷新浏览器就会重新发送这个post请求,造成表单重复提交. 解决办法: 将请求当 ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
随机推荐
- JS数据类型&&typeof&&其他
1. 5种基本数据类型: 1. String 2. Number 3. Boolean 4. Undefined 5. Null 2. 1种复杂数据类型:Object 3. 检测变量的数据类型:typ ...
- ZOJ 3713 In 7-bit
点我看题目 题意 : 这个题的英文叙述真的是太强了,真不知道哪里来的英文,完全看不懂,看了两个小时没弄懂真正的题意.就是给你一个字符串,先输出长度,但是长度要用二进制表示出来,二进制的低7位左边如果没 ...
- Error -27791: Server xx has shut down the connection prematurely
最近在进行一次性能测试中遇到一个问题,并发较大的时候会出现LR出现Error -27791: Server xx has shut down the connection prematurely的ER ...
- Ubuntu下APACHE HTTPS安装和配置
http://blog.csdn.net/newjueqi/article/details/9789659
- 快速扫描文本文件,统计行数,并返回每一行的索引位置(Delphi、C#)
由项目需要,需要扫描1200万行的文本文件.经网友的指点与测试,发现C#与Delphi之间的差距并不大.不多说,列代码测试: 下面是Delphi的代码: //遍历文件查找回车出现的次数 functio ...
- 一个简单的有向图Java实现
最近看了点有向图的内容,参考开源项目做了一个简单版本,直接贴代码. /** * 有向图接口,定义需要实现的各个方法,可以选择使用邻接矩阵或者邻接链表来实现 * @param <V> V代表 ...
- springmvc工作流程
Spring MVC工作流程图 图一 图二 Spring工作流程描述 1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServle ...
- 多设备官方教程(6)控制多版本API
Supporting Different Platform Versions While the latest versions of Android often provide great APIs ...
- 为什么你的 phpinfo() 无法显示
一.问题描述 编写了一个php文件test.php,代码如下: <?php echo phpinfo(); ?> 浏览器访问了一下,却返回了 NULL. 二.问题定位及解决 网上查了下,大 ...
- Hibernate级联操作
cascade属性的可能值有 all: 所有情况下均进行关联操作,即save-update和delete. none: 所有情况下均不进行关联操作.这是默认值. save-update: 在执行sav ...