html表单背景如何填充,Chrome 自动填充的表单是淡黄色的背景,有方法自定义吗...
这个本人原创文章,原文链接
去掉chrome记住密码后自动填充表单的黄色背景
写本文起因
chrome浏览器自动填充表单的黄色背景高亮(#FAFFBD)一直困扰着我,我之前没想着理它,可是最近一个登陆框,需要用到图标,于是我草率的直接设置在input元素里面,结果问题就来了,很难看很难看,因此还是总结一下。
这个问题,在2008年的时候就已经存在了,隔了好几年了,在chromium上面可以找到 Issue 46543,但是官方好像没有理这个问题,英文没怎么看懂,谁理解的,可以给大家分享一下。
思路一: 打补丁
Webkit内核的浏览器有一个-webkit-autofill私有属性,
通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
cssinput:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
因此我们就会想到覆盖这个样式,代码如下,但是依然不能覆盖原有的背景、字体颜色。需要注意的是:加 !important 依然不能覆盖原有的背景、字体颜色,除了chrome默认定义的background-color,background-image,color不能用 !important 提升其优先级以外,其他的属性均可使用!important提升其优先级。
cssinput:-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 */
}
情景一:input文本框是纯色背景的
解决办法:
cssinput:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}
情景二:input文本框是使用图片背景的
解决办法:
jsif (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);
}
下面的js不是太靠谱
jsif (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
});
}
思路二: 关闭浏览器自带填充表单功能
设置表单属性 autocomplete="off/on" 关闭自动填充表单,自己实现记住密码
html
网上大部分文章是使用Cookie实现记住用户名、密码。不管是在前端,还是后端都可以实现。本文不对Cookie存储展开讨论。可自行谷歌
其他
总结
// TODO: 待编辑
html表单背景如何填充,Chrome 自动填充的表单是淡黄色的背景,有方法自定义吗...相关推荐
- 去掉Chrome自动填充表单浅黄色背景色
前言 今天玩推时看到Chrome自动填充表单一个安全性问题,瞬间勾起我对其另一个显示问题的不满,忍不住小吐槽一下. 问题 Chrome自动填充表单(记住用户名或密码)时,input会出现黄色的背景.如 ...
- 浏览器自带的autocomplete默认样式是淡黄色的背景
浏览器自带的autocomplete默认样式是淡黄色的背景,字体也是黑色的 修改默认样式: /*改变浏览器autocomplete默认的样式*/ p.login-input input:-webkit ...
- Chrome 自动填充的表单是淡黄色的背景怎么办!
chrome浏览器自动填充表单的黄色背景高亮(#FAFFBD)一直困扰着我,我之前没想着理它,可是最近一个登陆框,需要用到图标,于是我草率的直接设置在input元素里面,结果问题就来了,很难看很难看, ...
- 解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题
项目中管理系统使用chrome的首页登录界面会自动填充灰色背景.其填充样式为: 填充界面如下: 在网上查询了许多资料.这里我总结下比较好用的两个方法: 1.使用box-shadow将填充的背景覆盖(适 ...
- 去除chrome自动填充黄底样式
chrome浏览器自动填充的样式有时候会影响到系统即有的界面样式,需要去除浏览器自带的样式,思路是通过设置背景阴影覆盖原来的样式 input:-webkit-autofill {box-shadow: ...
- php怎么弄自动填充,ThinkPHP 自动填充(自动完成)详解及实例
ThinkPHP 自动填充 ThinkPHP 内置了数据对象的自动填充功能,可以用来处理默认值.数据过滤以及其他系统写入字段的自动处理. 要使用自动填充功能,只需要在对应的 Model类 里面定义 $ ...
- mysql自动填充_Mysql自动填充测试数据
前言 最近写了两个小脚本,一个应用于Mysql的自动填充测试数据,另外一个是bash写的定期删除日志文件,两个脚本如何使用,在GitHub上面都有所说明,这里不再赘述,这里主要是想聊一下Mysql的存 ...
- excel填充序列_猴哥讲述:excel的自动填充功能——自动填充单元格
我们都知道excel的自动填充功能非常的好用,自动填充功能可以帮我们在工作中大大的提升工作效率,同时还可以准确无误的帮助我们进行数据自动输入,我们也可以自定义自动填充的序列. 一.自动填充功能,是指我 ...
- java实体类生成mysql表_springboot+mybatis通过实体类自动生成数据库表的方法
前言 本章介绍使用mybatis结合mysql数据库自动根据实体类生成相关的数据库表. 首先引入相关的pom包我这里使用的是springboot2.1.8.RELEASE的版本 org.mybatis ...
最新文章
- 一不小心把win10的秘钥卸载了解决方法
- 关于Linux vi命令 vi命令一览表
- 电机驱动板测试:是否可以输出150kHz高频信号?
- HttpClient基础教程
- 互联网1分钟 | 0321 小米上线“朕惊视频”;依图医疗与华为联合发布智能医疗云...
- java的类属性默认有this 但容易与参数重名 所以需要显性的加上this 以分区别
- 使用Java流和In-JVM-Memory的超低延迟查询
- Python处理CSV大文件特定行数据
- git安装 tor_【git安装教程 windows】怎么装git window_git安装配置教程
- 微信小程序文件下载---视频,图片。
- TIBCO Spotfire使用技巧:如何使Spotfire表或散点图中呈现链接中图片
- 正弦交流电的最大值、有效值、和瞬间值概念解析和计算
- 免费抽奖---PMP续证PDU | PMP知识地图.
- HbuilderX连接夜神模拟器教程
- 蓝桥杯 PREV-10 幸运数
- win10文件索引服务器,Win10系统修改索引文件夹路径的方法
- 从五个维度来谈谈视觉设计师如何阐述设计风格
- 植物大战僵尸的简单修改
- 详细解释:Epoch、batch_size批处理大小、迭代次数之间的关系
- 大页面内存引起的杯具