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

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;
    }
}

完美的好