Chrome表单文本框自动填充黄色背景色样式

  开发后台管理系统或 网站时，使用谷歌的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自动添加背景色的问题描述的还算比较透彻，
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”。

关于网上盛传的方法不奏效的一些测试

这个问题困扰了我挺长一段时间的，网上写的方法主要有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">

 

第一次打开页面文本框没有填充黄色背景，点击获得焦点后也没有填充黄色背景，我自己添加的外边框蓝色阴影也还有。算是达到了预期效果。