Значок стиля на входе Фокус

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 первый и затем glyphicon в HTML ,

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>