輸入焦點上的樣式圖標

我想在我的輸入表單旁邊更改顏色時找到我的搜索圖標，當我重點關注時，但我似乎找不到合適的選擇器。如果我手動添加焦點事件的形式本身，這將工作，但不是在輸入。這裏發生了什麼？輸入焦點上的樣式圖標

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 
}

來源

2016-08-03 NooBskie

字形是小圖像，您不能以簡單的方式更改它們的顏色。要麼你會使用「字體awesom」或者你添加過濾器到你的圖形。 –

@TobiasK。有字體不與圖像相同的字體真棒。您可以通過css更改'顏色' – NooBskie

使用CSS您無法選擇上一個元素。你必須使用JS。 – Vucko

您可以使用+選擇適用的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>

來源

2016-08-03 06:58:09

這工作我剛剛結束了向圖形添加'浮動：左'以保持相同的樣式。謝謝 – NooBskie

輸入焦點上的樣式圖標

回答

相關問題