スタイルHTMLフォームで、すべてのブラウザの背景画像

Question

私はバックグラウンドでイメージを持つHTMLフォームを作成しています。現在のところ、特定のブラウザでは正しく表示されていますが、他のブラウザでは数ピクセルしか表示されません。

私は次のCSSが私の問題を解決すると思っていましたが、それは助けましたが、問題を解決しませんでした。

input { 
width: 105px;  
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */  
-moz-box-sizing: border-box; /* Firefox, other Gecko */  
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

さらに、すべてのフォーム入力は浮動し、余白を付けて配置されます。

Answer 1

画像は静的なサイズがある場合、あなたはposition:relative;とコンテナの背景として、それを設定することを検討して、位置やサイズのためtop:、left:、right:とbottom:でposition:absolute;を使用する場合があります。

Answer 2

.searchBox{ 
    background-image:url('images/magnifying-glass.gif'); 
    background-repeat:no-repeat; 
    padding-left:20px; 
} 

今、私たちは、単にCSSクラス「検索ボックス」に、当社のinputタグを割り当てます。

<input type="text" name="search" class="searchBox">