如何制作这样的搜索框？

Question

我想创建一个像这样的搜索框。有谁能够帮我？

Answer 1

使用HTML5输入占位符属性： http://www.w3schools.com/tags/att_input_placeholder.asp

对于搜索图标的图像，请查看： search icon inside search box

Answer 2

您可以使用bootstrap执行此操作：

https://jsfiddle.net/oa9wj80x/

<form class="navbar-form" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>