在开始时使用这个CSS类作为输入，然后相应地自定义:

.inp-icon { 背景:url(https://i.imgur.com/kSROoEB.png)no-repeat 100%; background-size: 16 px; ｝ <input class="inp-icon" type="text">

你可以试试这个:

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

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

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

我遇到过这样的情况。它没有工作，因为背景:#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;
}

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

只需使用CSS中的background属性即可。

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

#foo
{
    background: url(/img/foo.png);
}

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

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

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