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

Question

当表单 自动填充 时，图标消失了，我该如何解决？ 有人问了类似的问题，但从未回答过。 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;
}

Answer 1

好的，发生此问题是因为浏览器自动填充会将背景颜色更改为黄色，我认为无法覆盖此自动填充因为您使用背景图像，我们只能覆盖背景颜色，如此：

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

但我们有一些事情要做：

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

2-您可以将背景图像提供给另一个元素，例如使用：之前对于包含输入元素的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;
}