html文本框数据自动填充颜色,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存在性能问题，不建议多用。

方法二：

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

所有输入框：

单个输入框