Style-Icon auf Eingabefokus

Question

Ich möchte mein Suchsymbol neben meinem Eingabeformular haben, ändere die Farben, wenn ich mich konzentriere, aber ich kann nicht den richtigen Selektor finden. Wenn ich manuell ein Fokusereignis auf dem Formular selbst hinzufüge, wird dies funktionieren, aber nicht auf der Eingabe. Was ist denn hier los?

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

Sie + Wähler, die CSS auf der nächsten Geschwister anwenden können, aber dafür brauchen Sie input zuerst und dann die glyphicon in html setzen .

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>