表单自动填充时，文本字段中的图标消失了答案

【问题标题】：icons gone in text field when form auto filled表单自动填充时，文本字段中的图标消失了
【发布时间】：2016-05-20 20:23:03
【问题描述】：

当表单自动填充时，图标消失了，我该如何解决这个问题？有人问过类似的问题，但从未得到回答。 A forgotton question

CSS：

input[type=text] {
 width: 200px;
 height: 25px;
 padding: 0;
 border: solid 1px;
}

#name {
 background: url(images/icons/user.jpg) no-repeat;
 background-size: 20px 20px;
 background-position: 5px;
 padding-left: 25px;
}

【问题讨论】：

代码stackoverflow.com/help/mcve
注意到有不同的背景吗？
欢迎来到 StackOverflow。请阅读我们的How to Ask 页面以获取有关如何改进您的问题的提示。好的问题往往会从社区中提供更快、更好的答案。如前所述，请在您的问题中添加minimal reproducible example。没有它，几乎不可能确切地知道问题出在哪里。
我完全不明白你们的意思......
我们的意思是，如果没有完整的示例，就很难理解为什么代码会以这种方式运行。例如，我们看不到您的 HTML。是否涉及任何 JavaScript？等。提供minimal reproducible example 不仅会重现问题，还会为其他人提供足够的详细信息以开始故障排除。没有它，我们只是猜测可能导致问题的原因。

标签： css

【解决方案1】：

好的，出现这个问题是因为浏览器自动填充将背景颜色更改为黄色，我认为没有办法覆盖这种自动填充，因为您使用背景图像，我们可以像这样覆盖背景颜色：

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

但我们有一些事情要做：

1- 你可以使用autocomplete="off" 来阻止自动完成，我们可以避免这个问题。

2-您可以将背景图像提供给另一个元素，例如使用 :before 用于包含输入元素的 div，我为此解决方案做了演示，您可以在这里看到它：https://jsfiddle.net/IA7medd/obc68xhw/

HTML：

<div class="inputContainer">
  <input type="text">
</div>

和风格：

input[type=text] {
 width: 200px;
 height: 25px;
 padding: 0;
 border: solid 1px;
 background:white;
 padding-left: 25px;
}

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

.inputContainer{
  display:inline-block;
  position:relative;
}

.inputContainer:before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  top:3px;
  left:5px;
  background: url(https://image.freepik.com/free-icon/male-user-shadow_318-34042.png) no-repeat;
  background-size: 20px 20px;
}

【讨论】：