专栏首页山河木马去除chrome浏览器自动添加的默认样式(转)

去除chrome浏览器自动添加的默认样式(转)

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

input:-webkit-autofill {  
background-color: #FAFFBD;  
background-image: none;  
color: #000;  
}  

看到这里添加上这段代码,我会想到使用样式覆盖的方法解决。我完全可以使用!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框

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信端input type=file 无法上传图片

    <input id="photo" type="file" accept="image/jpeg, image/x-png, image/gif" captur...

    山河木马
  • CSS控制文字,超出部分显示省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    山河木马
  • js中获取时间new date()的用法 原

    得到的结果:1280977330000 注意:这里得到的结果将后三位(毫秒)转换成了000显示,使用时可能会出现问题。例如动态添加页面元素id的时候,不建议使用...

    山河木马
  • 教你如何用python批量下载B站的视频

    一开始,我本来是想要做一个将视频转换为字符串的视频的,首先就得找一个视频做素材,紧接我就逛逛B站,找我想要的视频,然后发现B站并没有下载的按钮,于是乎我就想,...

    sjw1998
  • 教你如何用python批量下载B站的视频---更新版

    由于B站在获取它的aid编号的地方换成了其他的东西,所以会导致错误,这时候换个地方去获取它的aid编号便可以顺利获取视频了。

    sjw1998
  • iOS开发之定位

    在iOS开发中,定位是很多App都需要使用的功能。本文主要对iOS中的定位知识点进行介绍。本文代码环境为:Xcode 10.1 + Swift 4.2。

    YungFan
  • 一个验证码破解的完整演示

    这篇博客主要讲如何去破解一个验证码,for demo我会使用一个完整的工程来做,从原始图片到最终的识别结果,但是破解大部分的验证码其实是个很费力的活,对技术要求...

    GavinZhou
  • 故障案例:主从同步报错Fatal error: The slave I/O thread stops because master and slave have equal MySQL server

    场景一:因为数据量非常,大概有1.4T,需要在原先master1-slave1的情况下再创建一个库slave2,并且挂在slave1下,即master1-sla...

    拓荒者
  • 前沿 | 通用句子语义编码器,谷歌在语义文本相似性上的探索

    机器之心
  • mapboxGL和高德API结合实现路径规划

    高德地图路径规划API说明如上图,有行走、公交、驾车等多种路径,本文以行走为例来说明。

    lzugis

扫码关注云+社区

领取腾讯云代金券