Chrome浏览器已有密码自动填充时出现的背景色去除办法

Chrome浏览器已有密码自动填充时出现的背景色去除办法

本菜菜搜了很多文档都没找到办法解决，这个是大神帮我解决的。

先讲讲我去掉这个背景的历程：

首先，我设置input标签属性autocomplete=“off” ，无效+1

<input autocomplete="off"/>

其次，input:-webkit-autofill设置背景色为透明和设置相应的字体颜色，无效+1

input:-webkit-autofill{
      background-color: rgba(255,255,255,0);
      -webkit-text-fill-color: #fff !important;
}

然后，我看见有博客写的办法是添加内阴影

input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}

  但是，因为我需要设置的是透明色，而内阴影只起到一个遮挡作用，然后无效+1。如果需要的是不透明的颜色，这个应该就有效了。我甚至尝试过设置opacity：0和z-index：-1,但是这样整个密码框也会不见，走投无路之下尝试了有些博主说的下面这种办法。

四、额外添加一个伪造的input元素，初始可见，然后文档加载完毕，再通过setTimeout把伪造的input为隐藏，setTimeout设置的时间为1ms。

<template>
　　<div>
　　　　<input v-if="isShow" type="text">
　　</div>
</template>
<script>
　　export default {
　　　　data(){
　　　　　　return {
　　　　　　　　isShow:false
　　　　　　}
　　　　},
　　　　mounted(){
　　　　　　setTimeout(()=>{
　　　　　　　　this.isShow = true;
　　　　　　},1)
　　　　}
　　}
</script>

然而，还是不起作用。

最后，拜求大神，大神给的办法是：

input{
    background-color: rgba(255,255,255,0) !important;
}
input:-webkit-autofill{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
  }
input:-webkit-autofill:focus{
    -webkit-text-fill-color: #333 !important;
}

最关键的就是input背景的设置，以及对自动填充的伪类设置的transition，完美解决问题。填充元素的文字颜色就用-webkit-text-fill-color进行设置就好。