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

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

这对我来说很管用:

输入。有效的{ 边框颜色:# 28 a745; padding-right: 30 px; 背景图片:url (https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png); 平铺方式:不再重演; Background-size: 20px; 背景位置:右中心; ｝ < >形式 <标签= "名称" >名称> < /标签 <input class="valid" type="text" name="name" /> > < /形式

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得到了我的解决方案 我做了一些调整，虽然主要的功劳是他们。

您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。

换句话说，它们有这两条CSS规则:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

我遇到过这样的情况。它没有工作，因为背景:#ebebeb;我想把背景放在输入字段，该属性不断地显示在背景图像的顶部，我无法看到图像!我把background属性移到background-image属性上面，它起作用了。

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

我的解决方案是:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

值得一提的是，边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。

你可以试试这个:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}