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框

通过以上方法成功帮朋友解决浏览器自动添加默认样式问题,小伙伴们可以放心参考此文。

时间: 2015-10-06

在firefox和Chrome下关闭浏览器窗口无效的解决方法

首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的. 原因在于: Firefox下默认设置是无法通过脚本来关闭浏览器窗口的,为的是防止恶意脚本注入, 所以调整的方式就是在url地址栏中输入about:config, 然后在配置列表中找到 dom.allow_scripts_to_close_windows 点右键的选切换把上面的false修改为true即可. 默认是false chrome下的默认是不支持这种关闭方式的,但是也可以通过一

js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 第一种,只区分浏览器,不考虑版本 复制代码 代码如下: function myBrowser(){     var userAgent = navigator.

ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法! 先下载ZeroClipboard http://www.jb51.net/jiaoben/24961.html <style type="text/css"> body { font-family:arial,sans-serif; font-size:9pt; } .copyit {text-align:center; border

IE、FF、Chrome浏览器中的JS差异介绍

因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一.在平常的开发中,我们常使用的JS框架基本已经帮我们处理好了JS在各浏览器中的差异,但作为一个开发人员,还是有需要了解JS在浏览器中的差异. FF.Chrome:没有window.event对象 FF.Chrome:没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:function handle(e){e = e || event

flex chrome浏览器调试出现空白的解决方法

flex 4 在 chrome中调试时,空白,原因是谷歌有个默认的flash播放器,只要将默认的播放器禁用,留下新安装的插件,就OK了,只要在浏览器地址栏中,输入:"chrome://plugins/",会看到flash player有两个文件,点击查看详细,将chrome下面的关闭就ok了.

C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

复制代码 代码如下: // FileName: BrowsHistory.h // ------------------------------------------------------------------------------------------------------------------------// Remarks://   BrowsHistory对象应该设置成全局,或者静态:防止还没有获取完网址,对象就析构了:// ------------------------

如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”

一.避免弹出提示框 在网上搜了很多,答案大都是设置window.onbeforeunload=null ,但是试用之后无效. 这个问题放了两天之后返回来再次想,终于找到了答案,在此和大家分享一下: 解除jquery离开页面弹出提(1) 先解除绑定在设置弹出内容为null. 复制代码 代码如下: $(function(){   $(window).unbind('beforeunload');   window.onbeforeunload = null;   }) 二.其他相关[摘要] (1)w

jquery实现Li滚动时滚动条自动添加样式的方法

本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内容会自动随滚动条变化而下移,并自动添加样式. 运行效果截图如下: 具体代码如下: <html lang="en"> <head> <meta charset="utf-8"> <title>scroll滚动,LI随滚动条自动变化</title> &

javascript判断chrome浏览器的方法

通过userAgent判断检测一下userAgent返回的字符串里面是否包含"Chrome", 具体怎么检测是通过indexOf方法进行的. 复制代码 代码如下: <script type="text/javascript">    var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;    alert(isChrome);    if (isChrom

js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

直接上代码 复制代码 代码如下: var kingwolfofsky = { /** * 获取输入光标在页面中的坐标 * @param {HTMLElement} 输入框元素 * @return {Object} 返回left和top,bottom */ getInputPositon: function (elem) { if (document.selection) { //IE Support elem.focus(); var Sel = document.selection.creat

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

很多网站实现了利用JS保存页面中文本框内容到本地,并另存为指定文件扩展名与编码类型的功能,特别是一些代码教程,JS特效站上更是长见.如何利用JS实现这种功能的呢,下面给出了具体的实现代码 首先建立HTML文件,具体代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body&

js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

学习vue.js表单控件绑定操作

本文实例为大家分享了vue.js表单控件绑定的具体代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件绑定</title> </head> <body> <!-- v-model在表单控件元素上实现数据的双向绑定 -->

JS实现OCX控件的事件响应示例

JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种机制使JS也可以完成OCX控件事件的响应. 简单举例如下: 首先在OCX控件中添加自定义事件(预定义事件同理,如鼠标点击等,没亲自试,感觉原理应该是一样的), 事件应该是属于窗口的,所以在Ctrl类上单击右键,Add->Add Event,如下图: 在打开的对话框中输入事件名称,例如OnChange

Vue.js 表单控件操作小结

概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

js重写alert控件(适合学习js的新手朋友)

纯粹是为了打发时间,手写了一个JS的 alert控件. 代码如下: <html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC

js判断页面中是否有指定控件的简单实例

if (document.getElementById('show_pic')!=null){document.getElementById('show_pic').src=this.value;} show_pic是页面中的一个图片控件,我们首先要保证这个控件存在于页面上,才能对其进行操作,不然JS就会出现错误,所以用这种方式进行了判断,我听网友说,JS中还有一个函数,可以判断对象是否存在,可惜我没有找到.

教你用AngularJS框架一行JS代码实现控件验证效果

如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu