検索フォームにCSS（旧版）

• ADPホーム
• 説明エントリ

これは2005年作成の旧版です。IE7、Firefox、Opera 9、Safari 3（Beta）に対応したフォームにCSS 2007をご覧ください。

背景

対象ブラウザをIE6, Mozilla, Opera, Safari, MacIE5とする。IE6は後方互換モードにし、form要素やinput要素にCSSを適用して、できるだけフォームの大きさや位置をあわせたいと考える。

htmlのほうは

<div id="F1">
<form action="">
<p><input class="search" name="search" size="18" value="" /> <input class="searchsubmit" type="submit" value="Go!" /></p>
</form>
</div>

でやってみる。

通常のデザイン。ちなみに、Windows XPではXPスタイルとクラシックスタイルでボタンのデザインが変わる。背景画像は位置指定の具合を見てもらうために入れたもの。

これに、widthやheightを指定すれば終わり、というわけにはいかない。問題となるのは、入力ボックス（input type="text"）とボタン（input type="button"またはtype="submit"）において、width/heightにborderやpaddingを含めるかどうかが、ブラウザの描画方法によって変わることである。borderやpaddingを含まないほうをcontent-box、含むほうをborder-boxと呼ぶことにする。

Mozillaは独自拡張の-moz-box-sizing:で変更が可能だが、他は変えられない。Safariはbackground, borderの指定を無視する。その他の独自のボタンデザインを持つブラウザは、backgroundまたはborderを指定するとデザインが変わる。

で、結論から言うと、上記の違いにより、大きさ、位置ともにぴったりあわせることは出来ない。フォームの部品の場合は、（CSS2のレベルでは）どちらかが正しくてどちらかが間違い、とも言えないらしい。なので、あきらめましょう、ではなくて、CSSを使ったおすすめ妥協案を挙げることにする。

がんばらない妥協案

左端、または右端だけあわせる場合、pにposition: absoluteを指定し、text-alignで調整するだけでいい。vertical-alignをbottomまたはmiddleにするだけで、そこそこまともにみえるが、縦の位置をぴったりあわせることは難しい。これにwidthやheightを指定しても、数ピクセルの単位でずれることになる。

p {
	position: absolute;
	left: 20px;
	top: 40px;
}
p input {
	vertical-align: bottom;
}

（背景画像は上位の要素で指定）

がんばる妥協案

レイアウト上必要になるのは、フォームの両端をあわせることと、フォームの部品の下端をあわせることあたりだろう、という前提にたって、妥協案を提案する。

paddingは1px。両端と下端をあわせるには、formに大きさを指定し、position: absoluteを使って、入力ボックスはformのぴったり左下（left: 0; bottom: 0;）に、ボタンはぴったり右下（right: 0; bottom: 0;）にもっていくといい。content-boxで描画されても大丈夫なように、formの部品の余白をある程度あけるようにしておく。これで、多少入力ボックスとボタンの大きさが変化しても両端と下端はそろう。Mozillaは入力欄とボタンの描画方法が違うので、入力ボックスのほうに-moz-box-sizing: border-boxを指定して、width/heightにborderやpaddingを含めるほうにそろえる。

form {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 180px;
	height: 40px;
}
.search {
	-moz-box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 1px;
	width: 120px;
	height: 20px;
}
.searchsubmit {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1px;
	width: 40px;
	height: 20px;
}

（背景画像は上位の要素で指定）

おまけで、入力ボックス、ボタンの両方にborderやbackgroundを指定し、かつ、背景画像に「サイト内検索」みたいな文字を入れることで、うまくレイアウトする例を挙げる。これなら、入力ボックスとボタンの大きさが変化しても、結果的に「サイト内検索」の文字を含むフォーム全体の大きさを同じにすることができる。

form {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 180px;
	height: 40px;
}
.search {
	-moz-box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: 0;
	border: 1px solid #a96666;
	padding: 1px;
	width: 120px;
	height: 20px;
	background-color: #fffafa;
}
.searchsubmit {
	position: absolute;
	right: 0;
	bottom: 0;
	border: 1px solid #a96666;
	padding: 1px;
	width: 40px;
	height: 20px;
	background-color: #f9b0d4;
	background-image: url(20050215-5.gif);
	color: #221111;
	font-family: Arial, sans-serif;
	font-weight: bold;
}

（背景画像は「サイト内検索」の文字含め上位の要素で指定）

他の妥協案

borderとpaddingを含むかどうかで悩んでいるんだから、入力ボックスもボタンも、borderとpaddingをゼロにしてしまえばいい。境界線やボタンのデザインはすべて背景画像に任せる。これなら、-moz-box-sizingの指定もいらなくなる。この際、borderの指定を無視するSafariや、borderにゼロを指定するとborderが勝手に復活するOperaのことを考えて、デザインに注意する。確認作業は必須かも。

form {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 180px;
	height: 40px;
}
.search {
	position: absolute;
	left: 0;
	bottom: 0;
	border: 0;
	padding: 0;
	width: 120px;
	height: 20px;
}
.searchsubmit {
	position: absolute;
	right: 0;
	bottom: 0;
	border: 0;
	padding: 0;
	width: 40px;
	height: 20px;
	background-color: #f9b0d4;
	background-image: url(20050215-7.gif);
	font-family: Arial, sans-serif;
	font-weight: bold;
}

（背景画像は上位の要素で指定）