input:-webkit-autofill

chrome表单input获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东，当你选择其中一个时，input文本框的背景会变成黄色的（如下图），这是由于chrome会默认给input加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}
在有些情况下，这个黄色的背景会影响到我们界面的效果，尤其是在我们给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文本框是使用图片背景的
方法一：
因为这个样式的出现只有在之前有输入记录的情况下才会出现的，所以只有禁用input的记录就能ok！比如：<input type="text"  autocomplete="off">，这样当你点击了input时它就不会有那一列表了！
      autocomplete属性默认值为on，也就是设置为on的情况下，input才会有黄色的背景色哦！
 方法二（js）：
 if(navigator.userAgent.toLowerCase().indexOf('chrome')>=0){
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var txt=$(this).val();
var name=$(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name='+name+']').val(txt);
})
})
   }
拓展（innerHTML与outerHTML）:
一张图一目了然！！！（这是在百度上找的一张图，觉得非常形象）！
outerHTML可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签，比如：
console.log($('#testdiv').outerHTML),打印出来的结果就是：
<div id='testdiv'><p>Text in DIV</p></div>
innerHTML可以用来获取元素内的html和文本内容；
innerText只获取元素内的纯文本内容；
注意：
outerHTML、innerHTML不是W3C的标准，使用时要注意浏览器兼容性！
最后，希望大家多些建议，多些指点！！
 
 
  
  
阅读全文
                                             
        0        0           
	
				
	
					   
input:-webkit-autofill
	  	   
input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色
	  	   
input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色
	  	   
input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色
	  	   
（转）input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色
	  	   
input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
	  	   
input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
	  	   
webkit autofill  改变背景颜色
	  	   
input输入框autofill自动变成黄色
	  	   
autofill　收藏
	  	   
autoFill.js
	  	   
Autofill 实践
	  	   
Browser Autofill feature
	  	   
detecting autofill on chrome
	  	   
Make autofill background transparent
	  	   
修改输入框placeholder文字默认颜色-webkit-input-placeholder
	  	   
修改输入框placeholder文字默认颜色-webkit-input-placeholder
	  	   
修改输入框placeholder文字默认颜色-webkit-input-placeholder
	     		  
	  	   
com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
	  	   
Cocos2d-lua 初识shader之一：置灰
	  	   
easyPoi学习
	  	   
jquery 数据校验，input只能输入浮点数
	  	   
仿复选框样式
	  	   
input:-webkit-autofill
	  	   
利用MariaDB Auditing Plugin实现社区版MySQL的审计功能
	  	   
制作新闻列表前的序号
	  	   
《机器学习实战》第九章
	  	   
zookeeper集群
	  	   
spriteFrameCache和textureCache
	  	   
mac下idea的使用之常用快捷键篇
	  	   
【Java面试题】spring IOC和AOP的原理?
	  	   
图文讲解QuickSort快速排序算法