取消Chrome表单文本框自动填充黄色背景色样式
开发后台管理系统或网站时,使用谷歌的Chrome浏览器访问网页中表单,文本框背景色自动填充为黄色。这个问题在网络上其实早已经是老生常谈了,今天正巧我要处理这个问题,把之前查阅的一些资料和自己解决这个问题的方法纪录在此,一是为大家遇到此问题时提供一份资料,二是作为自己的笔记。过多的话就不多说了,下面进入正题。
一、首先介绍一下我遇到这个问题时文本框的样式情况:
我自己为文本框加的,获得焦点后,周围有蓝色阴影。
<input class="txt" id="userName" name="userName" type="text" value="" style="" /><style type="text/css">
.txt{ width:130px; height:22px; line-height:20px; padding-left:5px; border:1px solid #aaaaaa; outline:none; margin:6px 0px;
}
</style><script type="text/javascript">
$(document).ready(function(){ // 文本框获得焦点后,边框颜色改为蓝色,添加蓝色阴影 $('.txt').focus(function(){ $(this).css('border', '1px solid #5789DC');$(this).css('box-shadow', '0px 0px 5px rgba(87, 137, 220, 0.5)'); }); // 文本框失去焦点后,边框恢复灰色,去掉阴影 $('.txt').blur(function(){ $(this).css('border', '1px solid #aaaaaa'); $(this).css('box-shadow', '0px 0px 0px rgba(0, 0, 0, 0.5)'); });});
</script>
二、我找到过的资料
引用文章链接:点击打开此文章:《chrome表单自动填充去掉input黄色背景解决方案》
下面为文章内容:
==== 文章开始
=====================================================================================
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框都被覆盖了:
情景一:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
如果你有使用圆角等属性,或者发现输入框的长度高度不太对,可以对其进行调整,除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级,如:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
height: 27px!important;
line-height: 27px!important;
border-radius: 0 4px 4px 0;
}
情景二:input文本框是使用图片背景的
这个比较麻烦,目前还没找到完美的解决方法,有两种选择:
1、如果你的图片背景不太复杂,只有一些简单的内阴影,那个人觉得完全可以使用上面介绍的方法用足够大的纯色内阴影去覆盖掉黄色背景,此时只不过是没有了原来的内阴影效果罢了。
2、如果你实在想留住原来的内阴影效果,那就只能牺牲chrome自动填充表单的功能,使用js去实现,例如:
$(function() {
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('ul input:not(input[type=submit])').each(function(){
var outHtml = this.outerHTML;
$(this).append(outHtml);
});
});
}
});
遍历的对象可能要根据你的需求去调整。如果你不想使用js,好吧,在form标签上直接关闭了表单的自动填充功能:autocomplete=”off”。
关于网上盛传的方法不奏效的一些测试
这个问题困扰了我挺长一段时间的,网上写的方法主要有2种:第一种是在样式里对input:-webkit-autofill重写background-color和color,使用!important提高其优先级。第二种是使用jquery,先判断是否是chrome,如果是,则遍历input:-webkit-autofill元素,再通过取值,附加,移除等操作来实现。
但是我测试发现,这两种方法都不凑效!不知道是随着chrome版本的升级,现在的chrome(27)已经不支持重写input:-webkit-autofill原有的属性,还是怎么回事。另外js也无法获取到chrome自动填充的表单的value值,所以网上盛传的使用jquery解决的方法也是不凑效,最多也就只能去掉黄色背景,而自动填充的value却被移除了。chrome自动填充的表单的value值是存在DocumentFragment里的div中的,如果有哪位童鞋知道怎么获取chrome自动填充的表单的value值,还请指教一下。
=====================================================================================
==== 文章结束
三、使用网上的几种处理方法后的问题:
方法一:
添加如下代码:
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;
}
问题为:第一次打开页面,文本框正常,为白色背景,如下面左图;但是点击文本框后,背景再次被填充为黄色了,如下面右图;所以未达到效果。
方法二:
添加如下代码:
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
与上一个对比,在样式后面添加了“!important”,使用!important提高其优先级。
问题为:第一次打开,文本框背景没有被填充;点击文本框,背景也没有被填充;但是自己为文本框添加的点击获得焦点后添加阴影的效果没有了。
审查元素后,看看原来如此,后加的阴影样式覆盖了自己写的外边框阴影;如此还是没有达到效果。
四、目前我使用解决方案:
在form标签上直接关闭了表单的自动填充功能:autocomplete=”off”
<form action="loginAction" method="post" autocomplete="off">
第一次打开页面文本框没有填充黄色背景,点击获得焦点后也没有填充黄色背景,我自己添加的外边框蓝色阴影也还有。算是达到了预期效果。
取消Chrome表单文本框自动填充黄色背景色样式相关推荐
- java文本域不可编辑_javascript:让表单 文本框 只读,不可编辑的方法
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使 的内容,"中国"两个字不可以修改.实现的方式归纳一下,有如下几种. 方法1: οnfοcus=this.bl ...
- input文本框自动填充背景色黄色解决办法
文章目录 input文本框自动填充背景色黄色解决方式 解决前后,截图对比: 解决方式 兼容性说明 input文本框自动填充背景色黄色解决方式 如何取消黄背景色?浏览器兼容处理? 解决前后,截图对比: ...
- html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
文本框类型 在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...
- 表单文本框提示字符点击时清空
表单文本框提示字符点击时清空(input标签onfocus时文本框内提示信息清空) 作用是,一个文本框,需要输入内容,在没有输入的时候里面有一段提示内容,当点击这个文本框输入的时候,文本框内的内容自动 ...
- 禁止浏览器文本框自动填充_18个有用的填充文本生成器
禁止浏览器文本框自动填充 "Filler" text is used when a design must be shown to an audience and body cop ...
- css搜索的文本框,一个很不错的CSS改写的大表单文本框和搜索按钮组
<一个很不错的CSS改写的大表单文本框和搜索按钮组>要点: 本文介绍了一个很不错的CSS改写的大表单文本框和搜索按钮组,希望对您有用.如果有疑问,可以联系我们. 先看效果图: 开始爬取 C ...
- html如何在页面打开时让鼠标光标停留在某个表单文本框,网页制作实用技巧
网页制作实用技巧 1.让你的网页无法另存为 ◆ 2.让IFRAME框架内的文档的背景透明 ◆ 3.禁止右键: ◆ onselectstart ="return false" οns ...
- html表单文本框作用,HTML表单的用法
在 HTML 中,表单是由 标记定界的区域,包含文本输入框.按钮.复选框和图形用户界面的其他功能部件.Web 应用程序使用表单以允许最终用户提供要发送到服务器的数据. form元素 常用属性: act ...
- AngularJS进阶 三 HTML 让表单 文本框只读,不可编辑的方法
HTML:让表单.文本框只读,不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name=" ...
最新文章
- java inner class,C# Inner Class vs. java 的inner class比较-JSP教程,Java技巧及代码
- tcp协议不具备的功能是_TCP协议的状态深度解析,你知道的和不知道的都在这篇文章(干货)...
- 世纪前线网络质量测试工具 是什么_成为一名软件测试工程师有什么前途?
- MySQL数据库创建用户root@%
- 你不知道的javascript(上卷)----读书笔记
- linux给命令起别名命令,alias命令 – 设置命令别名
- react-redux一点就透,我这么笨都懂了!
- EPOLL AND Nonblocking I/O
- ObjectC 与 C++ 混编时的编译器设置
- ESXI 7.0封装Intel网卡驱动
- 网络安全实验室 脚本关 10
- C++变量前面加下划线的含义
- codeforces 1183H 动态规划
- 人脸识别-----Olivetti Faces人脸数据集合处理
- 交互设计人员什么阶段介入
- PrettyTable | 美丽的表格
- linux的安卓源码编译提示版本不匹配,编译Android源码致命错误解决方案
- 第14周—项目1(3)二叉排序树
- 全球工业网络安全收入预计2028年达到244.7亿美元
- 【全栈之前端编程】Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页
热门文章
- 微信公众平台基本功能简单说明
- 基于springboot项目中使用docker-compose+es+kibana+logstash+mysql 提高数据查询效率
- 衡水年内计划发放万张农民工“一卡通” 防止拖欠工资
- mysql中locat函数,MySQL中的LOCATE和POSITION函数使用方法
- Nginx反向代理+PHP服务器搭建
- XShell下载安装及使用(免费版)
- GNSS数据下载脚本(Perl+Python)
- 印象笔记Markdown的使用方法
- park停车场项目实战
- Windows10系统TensorFlow-gpu平台下运行Fater-RCNN