我觉得这是最好最干净的解决办法。在input元素上使用text-indent:

{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; ｝ <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

没有背景图片的解决方案:

.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; ｝ <input type="text" class="icon" value placeholder="Search">

或者从右到左的图标

.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; ｝ <input type="text" class="icon-rtl" value placeholder="Search">

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元素上使用text-indent:

{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; ｝ <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

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

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

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

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

在输入中定位图标的一个简单易行的方法是使用下面代码所示的CSS属性position。 注意:为了清晰起见，我简化了代码。

创建围绕输入和图标的容器。 将容器位置设置为相对位置 将图标设置为绝对位置。这将使图标相对于周围的容器进行定位。 使用顶部，左侧，底部，右侧来定位容器中的图标。 设置输入内的填充，使文本不与图标重叠。

#输入容器{ 位置:相对; ｝ #输入容器> img { 位置:绝对的; 上图:12 px; 左:15 px; ｝ #输入容器>输入{ padding-left: 40像素; ｝ < div id = "输入容器" > < img / > <输入/ > < / div >