如何使用切換圖標進行搜索輸入

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

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

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