我不想改变我的输入文本的背景，也不会与我的SVG图标工作。

我所做的就是为图标添加负边距，这样它就会出现在输入框中

并在输入中添加相同的填充值，这样文本就不会出现在图标下面。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联风格是为了可读性考虑使用类

css后台解决方案做的大多数情况下，但它有一个问题与webkit (chrome)自动完成的图标消失。

还有其他解决方案，包括通过将输入包装在div中并添加一个额外的元素(img、div或类似元素)来更改html/dom结构。 我不喜欢解决方案，因为你需要调整元素css的绝对位置和/或调整像素大小，以获得正确的位置。 或者重新创建输入边框，将输入和img“合并”在一起。

所以这个解决方案是基于css背景图像不应用在输入元素，但应用在包装div。

HTML:

<div class="input-email">
    <input type="text" placeholder="Email" name="email" id="email">
</div>

CSS:

.input-email {
    background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
    display: inline-block;
} 

.input-email input{
    padding-left: 40px;
    background-color: transparent !important;
}

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

这种方式与.input-email类我定义我的图标图像为div背景(不受webkit autocomplete背景的影响)。 我将input元素的左侧填充为图像提供空间，并将其设置为透明(当不应用自动完成时，这是有效的) 最后，在webkit-autofill类中，我删除了自动补全设置的背景色。

注意:在第2点我设置了transparent !important，因为-internal-autofill-selected会在浏览器中呈现，如果不设置我的also为!我就无法覆盖它。

input:-internal-autofill-selected {
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}

我从这个帖子https://www.py4u.net/discuss/1069380得到了我的解决方案 我做了一些调整，虽然主要的功劳是他们。

与字体图标一起使用

<input name="foo" type="text" placeholder="&#61447;">

OR

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

这对我来说或多或少适用于标准表单:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

将上述标签添加到您的CSS文件中，并使用指定的类。

其他人发布的CSS解决方案是实现这一目标的最佳方法。

如果这会给你带来任何问题(请阅读IE6)，你也可以在div中使用无界输入。

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

不是那么“干净”，但应该在旧的浏览器上工作。