在自动填充表单上将输入背景更改为透明

Question

当浏览器自动填充我的表单时,我想将背景颜色设置为透明,目前看起来像是添加了图像,有谁知道如何完成此操作？

我试过这个,但它设置为白色,边框是黄色默认的样式,我希望文本的颜色也是白色.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

这是它的样子:

提前致谢 :)

Answer 1

最后,我得到了这段代码的结果:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

Answer 2

感谢martinezjc的想法,但如果我们打开页面一段时间,我们会注意到背景的变化

我们可以使用css动画消除转换并转发填充模式以使背景颜色永久化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

只需用你的颜色替换透明

Answer 3

用它来节省您的时间

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;
}

Answer 4

经过数小时的搜索，这是适用于 jquery 和 javascript 的最佳代码，这意味着它可以按照要求使字段透明

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

完美的好