html - 搜索框内的搜索图标

Question

所以我现在拥有的是:

但我想包括图标搜索 ICON SEARCH在左侧的文本框内。

这是我的代码:

<form class="navbar-form pull-left form-search">
    <select>
        <option>Search patient by...</option>
        <option name="fname">Firstname</option>
        <option name="fname">Lastname</option>
        <option name="fname">Last follow up</option>
    </select>
    <div class="input-append">
        <input data-provide="typeahead" data-items="4"  type="text" 
           class="span2 search-query">
        <button class="btn">Search</button>
    </div>
</form>

那么有什么想法可以实现吗？谢谢。

Answer 1

<input data-provide="typeahead" data-items="4"  type="text" class="search-query">

.search-query{
   background: url(../images/your_pic.format) no-repeat left ;
}

只需添加该图像作为背景，左对齐，不重复