html - 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>