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

当表单自动填充时，图标不见了，如何修复？ 有人问了类似的问题，但没有人回答

CSS:

---

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

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

但我们有一些事情要做：

1-您可以使用

autocomplete=“off”

来防止自动完成，我们可以避免此问题

2-您可以将背景图像提供给另一个元素，如使用：before对于包含输入元素的div，我为该解决方案制作了演示，您可以在此处看到：

HTML:

---

代码注意到有不同的背景吗？欢迎来到StackOverflow。请阅读我们的页面，了解如何改进您的问题。伟大的问题往往能从社区中提供更快、更好的答案。如前所述，请为您的问题添加一个答案。如果没有它，几乎不可能准确地知道问题所在。我完全不知道你们的意思…我们的意思是，没有完整的示例，很难理解代码为什么会以这种方式运行。例如，我们看不到您的HTML。是否涉及任何JavaScript？等。提供脚本不仅会重现问题，而且会向其他人提供足够的详细信息以开始故障排除。如果没有这些，我们只是猜测是什么导致了这个问题。

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

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