问题描述
chrome表单自动填充后autocomplete="on"
,input文本框背景色变为黄色,因为chrome会默认给自动填充的input表单加上input:-webkit-autofill私有样式,下面是样式代码:
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000; } ```
下面是问题图片:
![chrome浏览器](http://upload-images.jianshu.io/upload_images/740787-930cf18ddc664112.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####问题解决
由于加上的chrome加上的私有样式是不能覆盖的(改变background-color是不会有效果的),所以只有曲线救国。
这里我使用的是(不能解决文本框的背景是图片的情况):
input:-webkit-autofill{
box-shadow:0 0 0 120px #fff inset;//120这个值取至文本框宽度的1/2
}
使用后效果图:
![chrome浏览器](http://upload-images.jianshu.io/upload_images/740787-4936c182b0f213c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**另外这里附上网上看见的另一种方法,用js(这种方法一定程度上可以解决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); }); }); } 10.});