在自动完成表单中将输入背景更改为透明。

Question

当浏览器自动填充表格时，我想将输入框的背景颜色设置为透明，目前看起来像添加的图片一样，有人知道如何实现吗？

我已经尝试过这个方法，但是它会将背景色设置为白色，并且边框以黄色默认样式呈现，我还希望文本颜色也是白色。

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

这是它的外观：

提前感谢 :)

- martinezjc

---

你想要白色背景而不是透明的吗？ - Fares M.

是的，透明的，但这是我找到的例子，所以我需要在输入中使用白色文本的透明。 - martinezjc

-webkit-text-fill-color是什么？background-color又是什么？可能重复：https://dev59.com/6HE85IYBdhLWcg3wbS5i - Downgoat

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

- martinezjc

---

这是什么意思：5000秒的背景颜色。 - Danilo Pádua

移除背景颜色所需的过渡时间。 - martinezjc

在Chrome中测试了近20种解决方案后，已经没有缺陷。 - Janen R

它对我有效。想要更改光标颜色的提示如下： caret-color: #fff; - Mukhriddin Shakhriyorov

Answer 2

使用此功能可节省时间。

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

- wahmal

---

这非常简单，而且完美运作！在我看来是最佳解决方案。 - Rick Kukiela

不仅对我来说这似乎是唯一可行的方法，而且简直太短了！ - heyron

谢谢你是这样一个好人。自动填充只是...你知道的。 - Joel Carneiro

这个应该是最佳答案。 - Dawid Krajewski

默认情况下是透明的，感谢上帝！ - Matx

Answer 3

感谢martinezjc提供的想法，但如果我们让页面打开一段时间，我们会注意到背景颜色的变化。

我们可以使用CSS动画和forwards填充模式来消除过渡效果，使背景颜色保持不变。

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

只需将透明替换为您的颜色。

- ForceUser

---

很不错，我喜欢它。为了改变一个颜色，我们需要经历所有这些麻烦的事情，真是太神奇了。 - Eric Guan

这个解决方案更加稳定。1. 这不会在一段时间后改变颜色。2. 如果您尝试填写一个包含姓名、地址、电话等信息的地址，那么这个解决方案非常出色（仅第一个解决方案可以防止已更改字段的颜色更改）。 - CaptainZero

完美！谢谢。 - Vishal

@CaptainAdmin 注意，这个解决方案在桌面版Safari中根本不起作用。 - Fer

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

完美优秀

- Patrice Jaumotte