css--处理输入框后颜色问题

1. input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {  

2.     -webkit-text-fill-color: #ededed !important;  

3.     -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  

4.     background-color:transparent;  

5.     background-image: none;  

6.      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间  

7. }  

8. input {  

9.      background-color:transparent;  

10. } 

这样点击输入框的时候就不会触发边框颜色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}

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”。

        三、使用网上的几种处理方法后的问题： 

方法一：

添加如下代码：

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">

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