from自动填入内容，默认背景色问题

问题：

chrom浏览器的自动填充表单功能Autofill 在使用时，填充的表单输入框会变成奇葩默认的黄色底色，这对网页整体的观感造成了很大影响，而且处理起来很麻烦。

分析：

之所以会出现这种情况是因为 chrom会自动为 input 增加以下样式：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    
    
	background-color: rgb(250, 255, 189);
	background-image: none;
	color: rgb(0, 0, 0);
}

而且这个样式无法被覆盖，加 important 也不行，于是我们就得想其他方法。

解决方法

1.使用 box-shadow 覆盖

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    
    
	-webkit-box-shadow: 0 0 0 1000px white inset; // 背景设为白色
	-webkit-text-fill-color: #fff; // 字体颜色
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
    
    
	-webkit-box-shadow: 0 0 0 1000px white inset; // 获得焦点时背景设为白色
	-webkit-text-fill-color: #fff; // 字体颜色
}

这样就把背景改为白色了。

不过这种方式的缺陷是只能将背景改为纯色，而不能改成透明。如果需要透明背景的请看方法 2。

2.使用 animation 动画

input:-webkit-autofill {
    
    
	-webkit-animation: autofill-fix 1s infinite;
	-webkit-text-fill-color: #fff;
}
@-webkit-keyframes autofill-fix {
    
    
	from {
    
    
		background-color: transparent
	}
	to {
    
    
		background-color: transparent
	}
}

这样的意思是让颜色永远在 transparent 到 transparent 进行循环动画。

以上两种方法基本可以解决绝大部分问题了。

3. 关闭 autocomplete 功能

<form autocomplete="off"></form>