【Bug小记】input:-webkit-autofill:输入框自动填充背景问题

问题是这样的：

本来的登录输入框是这种设置好的半透明样式

但是 当选中 或者切换内容后就会自动填充白色的背景框，如下图

右键检查 尝试修改了好多样式，最后找到了 input:-webkit-autofill  

百度 发现大家都有发现这种情况，以下是我的总结：

一、     

设置box-shadow 用阴影覆盖

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(67,118,144,0.5) inset;
}

但这种方式并不适合我想要设置透明背景， 如下图 ，透明阴影加上了，但自动填充的白色还在

这种方法比较适合 纯色背景

二、

把自动输入关闭 添加 autocomplete="off"

<a-input 
    v-decorator="['username',{rules: validatorRules.username.rules}]"
    type="text"
    autocomplete="off"                    <!-- 加上这句 -->
    placeholder="请输入用户名"> 

看其他大佬说：在之前有输入记录的情况下才会出现的，所以只有禁用input的记录。

但我发现我的代码中，这句已经存在了，仍旧没有生效。

三、

延长自动填充背景色的时间，就是让颜色填充在“一万年”以后实现， 这样短时间就看不到啦

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

这种方法可以实现我想要的结果，效果如下：

最后！ 大家有更好的方法，欢迎指点！！！

参考链接：关于input:-webkit-autofill样式问题 - 清风·流云 - 博客园