文档章节

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

放开那个女孩
 放开那个女孩
发布于 2017/03/15 11:47
字数 623
阅读 71
收藏 0

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

  1. input:-webkit-autofill {  
  2. background-color: #FAFFBD;  
  3. background-image: none;  
  4. color: #000;  
  5. }  

 

看到这里添加上这段代码,我会想到使用样式覆盖的方法解决。我完全可以使用!important去提升优先级。但是有个问题,加!important不能覆盖原有的背景、字体颜色,除了chrome默认定义background-color,background-images,color不能使用

!important提升优先级,其他属性均可使用它来提升优先级。

  1. input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {  
  2.  background-color: #FFFFFF;  
  3.  background-image: none;  
  4.  color: #333;  
  5.  /* -webkit-text-fill-color: red; //这个私有属性是有效的 */  
  6. }  
  7. input:-webkit-autofill:hover {  
  8.  /* style code */  
  9. }  
  10. input:-webkit-autofill:focus {  
  11.  /* style code */  
  12. }  

 

思路有两个,1、通过打补丁,修复bug。2、关闭浏览器自带填充表单功能

 

情景一:input文本框是纯色背景的

解决办法:

  1. input:-webkit-autofill {  
  2.  -webkit-box-shadow: 0 0 0px 1000px white inset;  
  3.  -webkit-text-fill-color: #333;  
  4. }  

 

情景二:input文本框是使用图片背景的

解决办法:

  1. if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)  
  2. {  
  3.  var _interval = window.setInterval(function () {  
  4.  var autofills = $('input:-webkit-autofill');  
  5.  if (autofills.length > 0) {  
  6.   window.clearInterval(_interval); // 停止轮询  
  7.   autofills.each(function() {  
  8.   var clone = $(this).clone(true, true);  
  9.   $(this).after(clone).remove();  
  10.   });  
  11.  }  
  12.  }, 20);  
  13. }  

 

先判断是否是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框

本文转载自:http://blog.csdn.net/helloliuhai/article/details/51085706

共有 人打赏支持
放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
CSS 修改 IOS 默认按钮样式

不知道大家在做移动端页面的时候有没遇到过在 IOS 端 一些按钮显示和安卓的截然不同,今天下午又有一个小伙在群里问这个问题。我记得之前我也遇到过,今天给大家分享一下怎么使用 CSS修改IOS...

VIP_web
2018/06/26
0
0
去除inline-block元素间间距的N种方法

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inlin...

i33
2012/09/28
0
1
Chrome 必备的超实用扩展程序推荐(下)

前言 超实的 Chrome 扩展插件推荐下篇,本文继续分享 16 - 30 号好用的扩展程序给大家,一起打造全能浏览器! Chrome 浏览器必备扩展程序推荐 | Chrome 插件推荐(上) Chrome 浏览器必备扩展...

己立
2018/11/04
0
0
PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lecepin/article/details/78911091 前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是P...

王乐平
2017/12/27
0
0
Chrome 正在进行将混合内容自动更新成 HTTPS 的实验

谷歌的工程师们正在寻找一个解决 HTTPS 混合内容(mixed content)错误的方法,他们现在似乎有了正确的想法…… Chrome 团队将在这周进行一项实验,试图给 Mozilla 去年也试图解决的 HTTPS ...

段段段落
02/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
3
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
12
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
3
0
聊聊GarbageCollectionNotificationInfo

序 本文主要研究一下GarbageCollectionNotificationInfo CompositeData java.management/javax/management/openmbean/CompositeData.java public interface CompositeData { public Co......

go4it
昨天
3
0
阿里云ECS的1M带宽理解

本文就给大家科普下阿里云ECS的固定1M带宽的含义。 “下行带宽”和“上行带宽” 为了更好的理解,需要先给大家解释个词“下行带宽”和“上行带宽”: 下行带宽:粗略的解释就是下载数据的最大...

echojson
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部