css - 最後にアイコンで幅を埋めるCSS（検索ボックス）

Question

私はこれをやろうとしています:

(検索ボタンのサイズは固定で、左側は画面の残りの幅を取ります)。

私が今までに得た最高のもの：jsFiddle

HTML:

<input>
<img src="http://ii.alatest.com/css/iphone/search_icon.gif">

CSS:

input {
    height: 100px;
    font-size: 3em;
    width: 100%;
    float:left;
}

img {
    float:right;
    width:100px;
    height:100px;
}    

編集:言い忘れましたが、検索アイコンはクリック可能でなければなりません! これはおそらく、背景の一部ではなく、別の要素であるという解決策につながります。

Answer 1

このjsFiddle exampleのように、画像を入力の背景として使用することをお勧めします。

input {
    height: 100px;
    font-size: 3em;
    width: 100%;
    float:left;
    padding-right:120px;
    background-image: url(http://ii.alatest.com/css/iphone/search_icon.gif);
    background-position: 98% 50%;
    background-repeat: no-repeat;
}

または、このjsFiddle の例のように、両方の要素を左にフロートさせ、入力に幅を設定することもできます。

input {
    height: 100px;
    font-size: 3em;
    width: 70%;
    float:left;
}

img {
    float:left;
    width:100px;
    height:100px;
}