chrome浏览器form表单input自动填充背景颜色的问题

Chrome浏览器下form表单，点击input输入框选择输入记录自动填充时，输入框背景颜色会改变，这是chrome浏览器内置的表单自动填充背景颜色，查看元素后找到相关css样式如下：

input:-internal-autofill-previewed, 
input:-internal-autofill-selected, 
textarea:-internal-autofill-previewed, 
textarea:-internal-autofill-selected, 
select:-internal-autofill-previewed, 
select:-internal-autofill-selected {
    background-color: rgb(232, 240, 254) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

但是就算修改相应的样式，也不能改变自动填充的背景颜色，但是可以通过box-shadow内阴影覆盖颜色。

解决方法：

方法一：

input {
	box-shadow:inset 0px 60px 0px #fff;
}

代码中的60是input的高度。

提醒：据说box-shadow存在性能问题，不建议多用。

方法二：

关闭输入框的自动填充，会导致用户体验不怎么好

所有输入框：

<form action="" method="post" autocomplete="off">
	<input type="text" name="mail" value=""/>
</form>

单个输入框

<form action="" method="post">
	<input type="text" name="mail" value="" autocomplete="off"/>
</form>