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

淡淡的烟草味﹌ 2023-02-23 05:05 16阅读 0赞

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

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

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

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

其次，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进行设置就好。