Skip to content

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

Untitled-12blogや、ウェブページのデザインでの検索フォーム。ここのデザインをばっちりあなたの思い通りにデザインできたら、一気にクオリティが上がるようなきがしませんか?今日は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で処理しているものもありますので注意が必要です。
※画像の名前ですが、本当はきちんと意味を持たせた画像名にするべきです。
※画像の高さですが、こちらも1pxずれているのに意味はありません。
※divタグは挟んでもはさまなくてもOKです。

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

//追記

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

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

Categories: html+css.

Comment Feed

One Response

Continuing the Discussion

  1. [...] twitterの友人のブログ記事を見ていて思い出したこと。 CSSで検索フォームをカスタマイズ « vanillate [...]