検索フォームをCSSでデザインするサンプル集

検索フォームをCSSでデザインするサンプル集

Webサイトに「サイト内検索」ってよく見かけると思うですが、今回はその検索フォームをCSSでデザインする際のサンプルをいくつか作ってみましたので簡単な解説付きで紹介したいと思います。

demo page

…ここからが続き

検索フォーム サンプル 1

検索フォーム サンプル 1

<dl>
<dt>サンプル 1</dt>
<dd><form name="searchform1" id="searchform1" method="get" action="#">
<input name="keywords1" id="keywords1" value="" type="text" />
<input type="image" src="image/btn1.gif" alt="検索" name="searchBtn1" id="searchBtn1" />
</form></dd>
</dl>
/* サンプル 1
----------------------------------------------------------- */
#searchform1 {
	position: relative;
}
#keywords1	{
	width: 160px;
	height: 16px;
	background: url(../images/search.png) no-repeat 8px 3px;
	border: 1px solid #CCC;
	padding: 2px 2px 2px 26px;
}
#searchBtn1	{
	position: absolute;
	top: 0;
	left: 195px;
}

検索フォーム サンプル 2

検索フォーム サンプル 2

<dl>
<dt>サンプル 2</dt>
<dd><form name="searchform2" id="searchform2" method="get" action="#">
<input name="keywords2" id="keywords2" value="" type="text" />
<input type="image" src="image/btn2.gif" alt="検索" name="searchBtn2" id="searchBtn2" />
</form></dd>
</dl>
/* サンプル 2
----------------------------------------------------------- */
#searchform2 {
	position: relative;	
}
#keywords2	{
	width: 182px;
	height: 16px;
	background: #999;
	border: none;
	padding: 4px;
	color: #FFF;
}
#searchBtn2	{
	position: absolute;
	top: 0;
	_top: 1px;
	left: 190px;
}
*:first-child + html #searchBtn2	{
	top: 1px;
}

検索フォーム サンプル 3

検索フォーム サンプル 3

<dl>
<dt>サンプル 3</dt>
<dd><form name="searchform3" id="searchform3" method="get" action="#">
<input name="keywords3" id="keywords3" value="" type="text" />
<input type="image" src="image/btn3.gif" alt="検索" name="searchBtn3" id="searchBtn3" />
</form></dd>
</dl>
/* サンプル 3
----------------------------------------------------------- */
#searchform3 {
	position: relative;
}
#keywords3	{
	width: 170px;
	height: 16px;
	background: url(../images/input3.gif) no-repeat;
	border: none;
	padding: 3px 5px;
	color: #444;
}
#searchBtn3	{
	position: absolute;
	top: -1px;
	left: 178px;
}

検索フォーム サンプル 4

検索フォーム サンプル 4

<dl>
<dt>サンプル 4</dt>
<dd><form name="searchform4" id="searchform4" method="get" action="#">
<input name="keywords4" id="keywords4" value="" type="text" />
<input type="image" src="image/btn4.gif" alt="検索" name="searchBtn4" id="searchBtn4" />
</form></dd>
</dl>
/* サンプル 4
----------------------------------------------------------- */
#searchform4 {
	width: 200px;
	background: url(../images/input4.gif) left top no-repeat; 
	display: block;
	height: 24px;
	position: relative;
}
#keywords4	{
	width: 156px;
	position: absolute;
	top: 3px;
	left: 12px;
	border: 1px solid #FFF;
}
#searchBtn4	{
	position: absolute;
	top: 3px;
	left: 174px;
}

検索フォーム サンプルダウンロード

demo page

Track Back

hatena chips

検索フォームをかっこよく

かっこいい検索フォームのサンプルを見つけたので導入してみました。 参考にしたのは、検索フォームをCSSでデザインするサンプル集のサンプル...

by hatena chips  

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article