入力フォーカスのスタイルアイコン

Question

フォーカスを合わせると入力フォームの横に検索アイコンが表示されますが、右のセレクタを見つけることができません。フォーム自体にフォーカスイベントを手動で追加すると、これは機能しますが、入力には反映されません。何が起きてる？

HTML

<form action="/search" class="form-inline" method="get"> 
    <div class="glyphicon glyphicon-search"></div> 
    <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text"> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox"> 
     Translate my search 
     <span class="bold">?</span> 
    </label> 
    </div> 
</form> 

CSS

input[type="text"]:focus .glyphicon-search{ 
    color: $bp-orange 
} 

Answer 1

あなたは次の兄弟にCSSを適用するが、そのためにあなたがinput最初とhtmlで、その後glyphiconを配置する必要があり+セレクタを使用することができます。

input[type="text"]:focus + .glyphicon-search{ 
    color: $bp-orange 
} 

<form action="/search" class="form-inline" method="get"> 
    <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text"> 
    <div class="glyphicon glyphicon-search"></div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox"> 
     Translate my search 
     <span class="bold">?</span> 
    </label> 
    </div> 
</form>