去掉chrome记住密码后自动填充表单的黄色背景

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

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

在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:

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

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:

  1. input : -webkit-autofill {
  2. -webkit-box-shadow : 0 0 0px 1000px white inset ;
  3. border : 1px solid #CCC !important ;
  4. }

如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:

  1. input : -webkit-autofill {
  2. -webkit-box-shadow : 0 0 0px 1000px white inset ;
  3. border : 1px solid #CCC !important ;
  4. height : 27px !important ;
  5. line-height : 27px !important ;
  6. border-radius : 0 4px 4px 0 ;
  7. }

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

这个比较麻烦,目前还没找到完美的解决方法,有两种选择:

1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。

2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用 js 去实现,例如:

  1. $ ( function () {
  2. if ( navigator . userAgent . toLowerCase (). indexOf ( "chrome" ) >= 0 ) {
  3. $ ( window ). load ( function (){
  4. $ ( ‘ul input:not(input[type=submit])‘ ). each ( function (){
  5. var outHtml = this . outerHTML ;
  6. $ ( this ). append ( outHtml );
  7. });
  8. });
  9. }
  10. });

遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete="off"。

上面是在网上找到的一些方法,我是用的图片背景,经过实验如果用js的方法会导致提交表单的时候重置而无法将value传过去,没办法只能是将自动填充的功能关闭了,虽然影响了部分用户的体验,但是解决了黄色背景影响整体UI的问题

时间: 2024-10-29 19:06:58

去掉chrome记住密码后自动填充表单的黄色背景的相关文章

用chrome浏览器实现手动“自动填充表单”

原文地址:http://blog.csdn.net/ffb/article/details/38559655 现在的浏览器基本都有自动填充表单的功能,可以极大的节约我们填写一些常见表单,尤其是登录表单的填写时间. 但是现在随着用户需求的不断发展,很多网页都是使用js来实时进行表单提交的操作,这些操作可能根本不涉及实际的submit操作,所以不会被浏览器截获并记录,这个时候面对一些需要反复重复填写的常见的表格就很郁闷了. 不过还好,这种情况依然是可以实现手动"自动填充表单"的,方法就是利

Android记住密码后自动登录

/** * * @author alex * @version 2014-7-31下午5:25:45 * */ public class LoginActivity extends Activity { private EditText name; private EditText pass; private CheckBox isRemenber; private CheckBox isLoginSelf; private Button longin; private ProgressDial

网页自动登录,自动填充表单代码

实现自动登录某网站,并且登录完成后跳转到指定的页面.然后进行表单的自动填充表单提交 .类型于小型的发帖机 哈哈 (看官在看下面代码的时候,把记得把下面的链接改下) public partial class Form1 : Form { public Form1() { InitializeComponent(); webBrowser1.Navigate("www.tiantianit.com"); } private void webBrowser1_DocumentComplete

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

文件上传控件值发生变化后自动提交表单

当文件上传控件发生变化后自动提交表单,首先在页面加载完成后注册change事件,然后检测到值得变化后提交上传代码,代码备忘. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> window.

浏览器保存密码后自动填充问题

问题描述 在浏览器中进行登录操作时浏览器往往会问我们是否需要记住密码,当我们点击了记住密码后,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产生效果. 浏览器自动填充机制 反复测试后发现浏览器自动填充机制是满足:页面里有一个type=password的input且这个input前面有一个type=text的input的时候就会进行自动填充.firefox和360浏览器的处理方式是:只要检测到页

java 传入用户名和密码并自动提交表单实现登录到其他系统

不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: 1 import java.io.IOException; 2 import java.util.List; 3 import java.io.BufferedReader; 4 import java.io.IOException; 5 import java.io.InputStreamReader; 6 i

避免浏览器自动填充表单的解决方式

以前在做项目的时候遇到过这个问题,当时年少太轻狂,没有想过是为什么会发生这样的问题,只觉得作为一个用户,每次在登录网站的时候很有用,很便捷,甚至觉得这个自动填充功能,嗯, 真棒!但是,这次又遇到了这个问题,我不禁陷入了沉思...为什么会有自动填充呢?为什么会变成黄色框框呢?作为一个开发者,在我不需要它自动填充的时候,它真的,很碍事! 于是乎~各种谷歌百度,试了一堆方法,终于让我解决了这个问题!!! 首先,在浏览器有点击过记住密码的操作的前提下,在直接写两个input,type分别等于text和p