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

通过box-shadow覆盖底色

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  box-shadow: 0 0 0 1000px white inset;
}

使用动画

1. 动画延迟

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
}

2. 通过无限循环动画

input:-webkit-autofill {
  animation: autofill-fix 1s infinite;
  -webkit-text-fill-color: #ccc;
}

@-webkit-keyframes autofill-fix {
  from {
    background-color: transparent
  }
  to {
    background-color: transparent
  }
}

3.通过 js 控制

<script type="text/javascript">
  if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
      Array.from(document.querySelectorAll('input:-webkit-autofill')).map(function(el){
        var text = el.getAttribute('value');
        var name = el.getAttribute('name');
        el.setAttribute('value', '');
        // el.setAttribute('value', text);
      });
  }
</script>

参考链接

1. chrome 浏览器表单自动填充默认样式 - autofill