搜索图标

所以我现在所拥有的是这样的：搜索图标

SAMPLE

但我想包括图标搜索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>

因此，任何想法如何实现这一目标？谢谢。

来源

2013-07-16 neknek mouh

你想在搜索按钮上或只是在文本框上的搜索图标？ – 2013-07-16 08:12:56

入住这Fiddle

<form class="navbar-form pull-left form-search"> 
    <div class="input-append"> 
    <input data-provide="typeahead" data-items="4" type="text" class="span2 search-query" style="background:url(http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png) no-repeat -38px 9px"> 
    <button class="btn">Search</button> 
    </div> 
</form>

正如你可以看到有其他的图标也呈现出。您必须为您的文本框使用单独的“搜索图片”。

来源

2013-07-16 08:26:39

有人可以更新小提琴吗？它似乎有点过时=） – Ninja

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

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

只需添加图片作为背景左对齐与不重复

来源

2013-07-16 08:01:35

，你可以这样做：

HTML：

<form class="navbar-form pull-left form-search"> 
<div class="input-append"> 
    <i class="icon-zoom-in"></i> 
     <input data-provide="typeahead" data-items="4" type="text" 
      class="span2 search-query"> 
     <button class="btn">Search</button> 
    </div> 
    </form>

CSS：

.icon-zoom-in 
{ 
    position:relative; 
    left:20px; 
    top:-8px; 
    z-index:999; 
}

试试吧： http://refork.com/xb70

来源

2013-07-16 08:03:55

回答

相关问题