blogや、ウェブページのデザインでの検索フォーム。ここのデザインをばっちりあなたの思い通りにデザインできたら、一気にクオリティが上がるようなきがしませんか？今日はCSSで比較的簡単に検索フォームをおしゃれに変身させてしまいましょう。
HTMLコード
<form id="t_searchform" method="get" action="url"> <div> <input type="text" name="s" id="s" size="15" /> <input type="image" id="go" src="./images/vani_12.jpg" width="26" height="30" value="search" /> </div> </form>
CSSコード
#t_searchform{ background: url(images/vani_11.jpg) no-repeat top left; width: 220px; height: 30px; } #t_searchform #s{ border: 0px; margin: 8px 0px 0px 13px;padding: 0px; float: left; width: 160px; } #t_searchform #go{ float: right; }
コーディングの順序：
1.まずは、IDを合わせましょう（HTML側・CSS側ともに）
2.#t_searchformにあたる部分のwidth:（幅）とheight:（高さ）を任意の値にします。（CSS側）
3.#t_searchformの背景にフォームのデザインをした画像を設定（繰り返しなしで上、左側に寄るようにしています）（CSS側）
4.送信ボタン部分を任意の画像に変更し、画像ボタンとしておきます。（HTML側）
<input type="image" id="go" src="ここに、画像のパス" width="画像の幅" height="画像の高さ" value="search" />
5.テキストエリアに当たる部分にCSSを適用します。（#t_searchform #sで指定）。
border:0px;
とすることで、テキストエリアの影が消えます。
margin: 8px 0px 0px 13px;padding: 0px;
ここで、２で指定した背景画像に合うように位置を調整しています。
float: left;
で、左へ寄せます。これ、重要です。いらない空白が消えます。
6.送信ボタンに当たる部分にCSSを適用します。（#t_searchform #go）
float: right;
ここでもfloatをかけます。これで、頭がそろい、完成です。
イメージは下記のようになります
※HTMLコードの中のform要素「method=」の値は、POSTで処理しているものもありますので注意が必要です。
※画像の名前ですが、本当はきちんと意味を持たせた画像名にするべきです。
※画像の高さですが、こちらも１pxずれているのに意味はありません。
※divタグは挟んでもはさまなくてもOKです。
参考：
d’bug by Brian Reindel
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
//追記
formタグでのtype=imageと、type=submitでの送信データには違いがあるそうです。詳しくはtwitterの友人の方に書いていただきました。（感謝！）
プログラムでのデータの受け渡しの際にはご注意ください。
[...] twitterの友人のブログ記事を見ていて思い出したこと。 CSSで検索フォームをカスタマイズ « vanillate [...]