chrome浏览器表单自动填充默认样式(背景变黄)-autofill
之所以出现这样的样式, 是因为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的更多相关文章
- chrome浏览器表单自动填充默认样式-autofill
Chrome会在客户登陆过某网站之后, 会自动记住密码 当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码 这本身是一个很好的功能, 但是 ...
- 浏览器表单自动填充默认样式 - autofill问题解决
这不知道是个什么神仙网站,解决办法写的这么清楚,页面有这么让人舒服 https://lhajh.github.io/css/chrome/2018/04/17/The-chrome-browser-f ...
- 解决Chrome下表单自动填充后背景色为黄色
Chrome浏览器在表单自动填充后会显示黄色背景,这是Chrome的私有属性导致,对于有洁癖的人来讲,是不喜欢的,我们可以手动去掉. 代码如下: input:-webkit-autofill { -w ...
- chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...
- chrome表单自动填充导致input文本框背景变成偏黄色问题解决
chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧, 这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有 ...
- #-webkit-autofill##google#启用表单自动填充时,如何覆盖黄色背景
google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素 ...
- 开发测试技巧|辅助开发调试:goolge浏览器利用F12在控制台输入脚本实现表单自动填充
一个开发测试技巧的指引和截图,利用google浏览器的F12调试和Console执行,注入JavaScript脚本实现表单的自动填充和测试. 原文链接: http://www.lookdaima.co ...
- chrome表单自动填充导致input文本框背景变成偏黄色问题
你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...
- Chrome表单自动填充如何取消(暂时可行的解决办法)
做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉. 之前也多次寻找过方法,但是网上的方法都差不多,很多都是 ...
随机推荐
- Python(八)之函数
Python函数 函数作用: (1)代码重用 (2)一种设计工具,分解复杂问题 (3)将相关功能打包并参数化 函数种类: 全局函数:定义在模块中 局部函数:嵌套在其他函数中 lambda函数:表达式 ...
- 7. 集成学习(Ensemble Learning)Stacking
1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...
- 迷你版mvc框架执行过程
一.把路由添加到路由表, 二.注册ControllerBuilder(老板)和默认工厂(DefaultControllerFactory) 2.1默认工厂获取可以创建的Controller. 三.由于 ...
- 【MySql 】is not allowed to connect to this MySql server 无法访问远程MySQL数据库
问题:访问远程MySQL数据库时报错[is not allowed to connect to this MySql server ]不允许访问,因为MySQL默认只有本机localhost能够访问M ...
- C#中的装箱拆箱
在C#中,经常需要把值类型和引用类型相互转换. 首先明确两条法则: 1.引用类型总是被分配到“堆”上. 2.值类型总是分配到它声明的地方: a.作为引用类型的成员变量分配到“堆”上 b.作为方法的局部 ...
- JVM相关命题的博客整理及总结
JVM垃圾回收基础介绍 http://www.jianshu.com/p/57457a351b8a 减少JVM中逃逸对象的使用 http://www.importnew.com/23150.html ...
- mybatis example 使用AND 和OR 联合查询
mybatis example 使用AND 和OR 联合查询 ViewPsmsgconsultExample example=new ViewPsmsgconsultExample(); ViewPs ...
- JavaScript:数据类型
JavaScript中数据类型分为两种: 1.基本数据类型 string number boolean null undefined 2.引用类型 数组.Object.function 一.基本数据类 ...
- 什么是API网关?
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/lcx216/article/details/52913645 1.API网关介绍 API网关是一个服务 ...
- 【Python】 linecache模块读取文件
[linecache] 过往在读取文件的时候,我们通常使用的是这种模式: with open('file.txt','r') as f: line = f.readline() while line: ...