问题
chrome 浏览器中,表单会默认填充样式:
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: -internal-light-dark(black, white) !important;
}
解决
1、通过纯色的阴影覆盖底色
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
/*覆盖背景颜色*/
-webkit-box-shadow: 0 0 0px 1000px #e4e8f4 inset;
/*字体颜色重置*/
-webkit-text-fill-color: #c62222;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
注: 这种只适用于纯色背景的输入框, 无法设为透明.
2、关闭这个功能
<!-- 对整个表单的设置 -->
<form autocomplete="off">
<!-- 单独对某个组件设置 -->
<input type="text" autocomplete="off">