本菜菜搜了很多文档都没找到办法解决,这个是大神帮我解决的。
先讲讲我去掉这个背景的历程:
首先,我设置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进行设置就好。