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

Category
： CSS リファレンス

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

検索フォーム　サンプル 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(../image/search.png) no-repeat 8px 3px;
	border: 1px solid #CCC;
	padding: 2px 2px 2px 26px;
}
#searchBtn1	{
	position: absolute;
	top: 0;
	left: 195px;
}

検索フォーム　サンプル 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

<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(../image/input3.gif) no-repeat;
	border: none;
	padding: 3px 5px;
	color: #444;
}
#searchBtn3	{
	position: absolute;
	top: -1px;
	left: 178px;
}

検索フォーム　サンプル 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(../image/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;
}