html5 – 搜索框内的搜索图标

所以我现在所拥有的是:

但我想在左侧的文本框中包含图标搜索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>

那么任何想法如何实现这一目标?谢谢.

解决方法

检查这个 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>

如您所见,还有其他图标也显示出来.您必须为文本框使用单独的“搜索图像”.

相关文章

HTML5不是新事物。自从最初发布(2008年1月)以来,我们一直在使用它的一些功能。后来,我再次仔细查看...
Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(...
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果。其中代表...
clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象...
语法 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同) 定义和用法...
基本代码 html代码: 首先定义一些基本的样式和动画: background-size: auto 100%; 这段代码的意思是让...