如何使用切换图标进行搜索输入

Question

我在横幅中间有搜索输入。我想在右边创建搜索图标，如果我点击那里，图标就会消失。我试过显示：绝对，但它没有响应。 我的代码：

<form class="col-md-offset-3 col-md-6 col-md-offset-3" id="searchForm">
  <div class="form-group">
    <input class="form-control" placeholder="Search" type="text">
    <img src="search-icon.png" />
  </div>
</form>

#searchForm {
    position:absolute;
    top:40%;
}

Answer 1

您可以在glyphicon上使用form-control-feedback类。

HTML：

<form class="col-md-offset-3 col-md-6 col-md-offset-3">
  <div class="form-group has-feedback">
    <input id="searchInput" type="text" class="form-control" placeholder="Search" />
    <i class="glyphicon glyphicon-search form-control-feedback"></i>
  </div>
</form>

CSS：

#searchInput:focus + i {
  display:none;
}

codepen