html - 背景グラフィック付きの検索バー

Question

以下のような検索ボックスがあり、ブートストラップを使用して柔軟なレイアウトを提供しています。以下のようなデザインを使用して、伸縮可能な検索ボックスを取得できるようにするにはどうすればよいですか。

Answer 1

入力ボックスを配置するコンテナが必要で、フロントとエンドの div を配置します。ブラウザの互換性によっては、さらにいくつかの div を追加して、IEX7/8 などのブラウザで入力ボックスが適切に表示されるようにする必要があるかもしれません。

したがって、次のようになります。

<form class="searchbox">
  <input type="text" class="text" />
  <input type="submit" class="submit" />
</form>

次のサンプル CSS を伴う

form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }