Chrome自动填充黄色背景在形式领域的象上

Question

Jsfiddle：jsfiddle.net/dlnkprs/MR33L /

我正在为Wordpress登录表单创建不同的样式。我在用户名和密码字段中都放了一个图标。显示：

但是..当您使用Chrome的自动填充时，背景变为黄色并且图标消失：

知道如何解决这个问题，以便图标仍然可见吗？

Answer 1

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

这将使输入的背景为白色，您可以明显地将颜色更改为您喜欢的任何颜色。遗憾的是，我找不到任何方法让图标显示在黄色背景前面，所以我建议最好的方法是通过向每个输入元素添加autocomplete="off"属性来关闭自动完成功能。

抱歉，我的帮助不大。

Answer 2

您可以在每个输入框的左侧创建一个span元素，并将图标作为背景。通过此操作，您可以将输入与实际图标分开，并保持自动完成功能。

演示： http://jsfiddle.net/pt8Rb/