你能幫我使用CSS中的「圖標字體」在搜索欄中打開搜索欄嗎？

Question

我一直在試圖讓搜索圖標打開一個搜索欄。我非常接近，但是當您單擊搜索圖標時，搜索輸入不會打開。當你點擊它剛剛打開的圖標的右側時。有沒有辦法讓這個工作沒有背景圖片？我想能夠使用圖標字體。

見這裏：http://cdpn.io/mkAyi

Answer 1

<input id="searchbox" class="t-box2" type="text" value="Search" name="text"> 

<style> 
    .t-box2 { 
    background-color: #FFFFFF; 
    background-image: url("../images/search_icon.png"); 
    background-position: 96% center; 
    background-repeat: no-repeat; 
    border: 1px solid #DFDFDF; 
    border-radius: 10px 10px 10px 10px; 
    color: #666666; 
    float: right; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    height: 21px; 
    margin-top: 4px; 
    padding: 2px 35px 2px 7px; 
    text-align: left; 
    width: 1px; 
} 
.t-box2:hover { 
    width: 100px; 
} 
</style>