之所以出现这样的样式, 是因为Chrome会自动为input增加如下样式.

这个样式的优先级也比较高. 
无法通过important覆盖(这就比较恶心了).

解决方案(3种):

1. 关闭自动保存账号密码功能

<!-- 对整个表单的设置 -->
<form autocomplete="off">
<!-- 单独对某个组件设置 -->
<input type="text" autocomplete="off">

2. 通过纯色的阴影覆盖底(huang)色

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

注: 这种只适用于纯色背景的输入框.

3. 设置input样式动画(推荐使用这种的. 因为基本上没有人会等那么久…)

/*
99999s 基本上就是一个无限长的时间
通过延长增加自动填充背景色的方式,
是用户感受不到样式的变化
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

chrome浏览器表单自动填充默认样式(背景变黄)-autofill的更多相关文章

  1. chrome浏览器表单自动填充默认样式-autofill

    Chrome会在客户登陆过某网站之后, 会自动记住密码 当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码 这本身是一个很好的功能, 但是 ...

  2. 浏览器表单自动填充默认样式 - autofill问题解决

    这不知道是个什么神仙网站,解决办法写的这么清楚,页面有这么让人舒服 https://lhajh.github.io/css/chrome/2018/04/17/The-chrome-browser-f ...

  3. 解决Chrome下表单自动填充后背景色为黄色

    Chrome浏览器在表单自动填充后会显示黄色背景,这是Chrome的私有属性导致,对于有洁癖的人来讲,是不喜欢的,我们可以手动去掉. 代码如下: input:-webkit-autofill { -w ...

  4. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  5. chrome表单自动填充导致input文本框背景变成偏黄色问题解决

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧, 这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有 ...

  6. #-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景

    google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素 ...

  7. 开发测试技巧|辅助开发调试:goolge浏览器利用F12在控制台输入脚本实现表单自动填充

    一个开发测试技巧的指引和截图,利用google浏览器的F12调试和Console执行,注入JavaScript脚本实现表单的自动填充和测试. 原文链接: http://www.lookdaima.co ...

  8. chrome表单自动填充导致input文本框背景变成偏黄色问题

    你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...

  9. Chrome表单自动填充如何取消(暂时可行的解决办法)

    做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉. 之前也多次寻找过方法,但是网上的方法都差不多,很多都是 ...

随机推荐

  1. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. linespace函数

    numpy.linspace numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None)[source] ...

  3. C++类默认函数

    问题,which is true??? 每个类都有一个无参构造函数 每个类都有一个拷贝构造函数 每个类可以有多个构造函数 每个类可以多个析构函数 默认构造函数   析构函数   拷贝构造函数   赋值 ...

  4. JedisConnectionPool scala

    /** * Created by lq on 2017/8/29. */ object JedisConnectionPool { val config = new JedisPoolConfig() ...

  5. sphinx/Coreseek 4.1 执行make出错

    参考的网址: http://blog.csdn.net/jcjc918/article/details/39032689 configure正确之后,执行make,出现如下的报错信息 configur ...

  6. Go Revel - main函数分析

    运行revel命令时,首先会编译整个项目,在编译时,会根据`app.conf`配置文件生成两个源码文件`tmp/main.go`.`routes/routes.go`,其中`main.go`是整个项目 ...

  7. CAS (6) —— Nginx代理模式下浏览器访问CAS服务器网络顺序图详解

    CAS (6) -- Nginx代理模式下浏览器访问CAS服务器网络顺序图详解 tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1. ...

  8. Kafka内核中的分布式机制实现

    Kafka内核中的分布式机制实现 一个Topic中的所有数据分布式的存储在kafka集群的所有机器(broker)上,以分区(partition)的的形式进行数据存储:每个分区允许存在备份数据/备份分 ...

  9. Hbase 学习(六) 配置文件调优

    这部分的内容,网上多了去了,都大同小异的,仅作为备忘录,省得需要的时候又要到处查. 1.zookeeper.session.timeout 默认3分钟,zookeeper和hbase通信的超时时间,设 ...

  10. click只能点击一次

    <select id="s_province" name="s_province" class="s_province">< ...