input:-webkit-autofill

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36671474/article/details/77980502

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

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

1. background-color: rgb(250, 255, 189);
2. background-image: none;
3. 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的标准，使用时要注意浏览器兼容性！

最后，希望大家多些建议，多些指点！！