删除Chrome自动填充的输入背景颜色？

在我正在处理的表单上，Chrome会自动填写电子邮件和密码字段。 这很好，但Chrome会将背景颜色更改为淡黄色。

我正在设计的设计是在深色背景上使用浅色文字，所以这确实弄乱了表单的外观 - 我有鲜明的黄色框和几乎看不见的白色文字。 一旦专注领域，领域恢复正常。

是否有可能阻止Chrome更改这些字段的颜色？

---

这工作正常，您可以更改输入框样式以及输入框内的文本样式：

在这里，您可以使用任何颜色，例如white ， #DDD ， rgba(102, 163, 177, 0.45) #DDD rgba(102, 163, 177, 0.45) 。

但transparent在这里不起作用。

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

另外，您可以使用它来更改文字颜色：

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

建议：不要在数百或数千中使用过度的模糊半径。 这没有任何好处，可能会将处理器负载放在较弱的移动设备上。 （对于实际的外部阴影也是如此）。 对于20px高度的普通输入框，30px'模糊半径'将完全覆盖它。

---

我有更好的解决方案。

将背景设置为另一种颜色，并不能解决问题，因为我需要一个透明的输入字段

-webkit-box-shadow: 0 0 0px 1000px white inset;

所以我尝试了一些其他的东西，我想出了这个：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

---

以前的解决方案可以为需要纯色背景的人们添加箱形阴影。 另一种添加转换的方法是有效的，但是必须设置一个持续时间/延迟将意味着在某一时刻它可能再次显示。

我的解决方案是使用关键帧，这样它将始终显示您选择的颜色。

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

链接地址: http://www.djcxy.com/p/26451.html

上一篇: Removing input background colour for Chrome autocomplete?

下一篇: How to ensure a <select> form field is submitted when it is disabled?