Chrom modify the default background color of the input box input

Form autofill function Autofill chrom browsers in use, fill the form input box will become the default wonderful yellow background, which had a significant impact on the overall look and feel of the page, and a lot of trouble dealing with them.

analysis:

The reason this happens is because chrom will automatically add the following styles for input:

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

And this pattern can not be covered, plus important does not work, so we have to think of other methods.

Solution

1. box-shadow cover

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; // 字体颜色
}

This put the background to white.

But drawback of this approach is that only the background changed to solid colors, not into transparent. See Method 2 If required a transparent background.

2. Using animation 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
	}
}

This does mean that the color always transparent to transparent circulation animation.

The above two methods can be basically solved most of the problem.

3. Turn off the autocomplete function

<form autocomplete="off"></form>
<!-- OR -->
<input autocomplete="off">