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; 
}  

編輯：我忘了提，搜索圖標必須b可點擊！這可能導致解決方案，它是一個單獨的元素，而不是背景的一部分。

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 example輸入。

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

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