chrome 浏览器表单自动填充默认样式

问题

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">

学习转自：
chrome 浏览器表单自动填充默认样式 - autofill