トグルアイコンで検索入力を行う方法

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