CSSで検索フォームをカスタマイズ

Posted on 2009年10月14日 by vanillate

Untitled-12 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をかけます。これで、頭がそろい、完成です。

イメージは下記のようになります
Untitled-1

※HTMLコードの中のform要素「method=」の値は、POSTで処理しているものもありますので注意が必要です。
※画像の名前ですが、本当はきちんと意味を持たせた画像名にするべきです。
※画像の高さですが、こちらも１pxずれているのに意味はありません。
※divタグは挟んでもはさまなくてもOKです。

参考：
d’bug by Brian Reindel
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌

//追記

formタグでのtype=imageと、type=submitでの送信データには違いがあるそうです。詳しくはtwitterの友人の方に書いていただきました。（感謝！）
プログラムでのデータの受け渡しの際にはご注意ください。

QUOIT Blog » submitとimageの挙動の違いについて

One Response to CSSで検索フォームをカスタマイズ