これは2005年作成の旧版です。IE7、Firefox、Opera 9、Safari 3（Beta）に対応したフォームにCSS 2007をご覧ください。
検索フォーム、つまり、inputの話のだいたいのまとめ。詳しくは、別のサンプルファイル「検索フォームにCSS」とそのZIPファイル「検索フォームにCSS」を参照のこと。ただし、position:relativeを使いまくっているので、MacIE5ではサンプルファイルは見られないかも。
概要。
対象ブラウザをIE6, Mozilla, Opera, Safari, MacIE5とする。IE6は後方互換モードにし、form要素やinput要素にCSSを適用して、できるだけフォームの大きさや位置をあわせたいと考える。
ここで、widthやheightを指定すれば終わり、というわけにはいかない。問題となるのは、入力ボックス（input type="text"）とボタン（input type="button"またはtype="submit"）において、width/heightにborderやpaddingを含めるかどうかが、ブラウザの描画方法によって変わることである。borderやpaddingを含まないほうをcontent-box、含むほうをborder-boxと呼ぶことにする。
content-boxとborder-box (280 bt 176 pixels, 2.5KB)
たとえば、Operaは入力ボックスもボタンもborder-boxで、MacIE5は両方ともcontent-boxである。Firefoxは入力ボックスがcontent-boxで、ボタンがborder-boxだったりする。
これだけなら、ADP: IE6のwidth解釈バグ対処法と同様の話である。しかし、面倒なことに、フォームの部品の場合は、（CSS2のレベルでは）どちらかが正しくてどちらかが間違い、とも言えないらしい。また、inputの場合は、その中の要素でborderやpaddingを指定して、ということができない。Safariのようにデフォルトのデザインが優先され、CSSの指定がいろいろ無視されるのもある。ので、入力欄と検索ボタンの大きさは基本的にばらばらになってしまう。
じゃあ、どうするのさ、ということで、CSSを使ったおすすめの妥協案を3つほど挙げてみた。
ひとつめは、あまり何も考えず、vertical-align: bottomだけ指定するもの。制御はほとんど出来ないが、これで済む場合も多い。
ふたつめは、form要素に大きさを指定し、position: absoluteを使って、入力ボックスをformの左下ぴったり、ボタンを右下ぴったりに指定することによって、formの部品の両端と下端をあわせるやつだ。背景画像を使って、上端もあったようにみせかけることもできる。
みっつめは、borderとpaddingを含むかどうかで悩んでいるんだから、両方ともゼロにしちゃえばいいじゃん、というものだ。その分、背景画像にがんばってもらう。
とにかく、ブラウザによって見た目はいろいろ違うので、確認作業は必須となるが、ふたつめとみっつめの妥協案ならば、結果的にピクセル単位でうまくあわせる（あったように見せかける）ことが可能となる。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/504
うちのMacIE5ではサンプルファイルも見られましたが、凡ミスでずれていたのでいま直しました。
ちょうどフォームのパーツを整えるのに試行錯誤してまして、とても参考になりました。
input:focus { border-color: green; }
を使いたいので、がんばる妥協案を採用しました。
他の妥協案の方ではcssだけで同様効果を再現する事は多分無理ですね。
input:focus { background-color: #FdFdFF; }
なら使えますが。
JavaScript併用で枠も同様の事が"簡潔に"できないかと考えてます。
ありがとうございます。inputの背景画像を変えればできそう、と思ったのですが、Operaではうまくいかないかもしれません。ちょっと実験してみます。
実験してみましたが、失敗しました。http://adp.daa.jp/archives/000508.html 。CSSだけでやるならば、「がんばる妥協案」のほうを使うことになりそうです。
通常のやり方2007の二番目の例ってSafari4だと、
フォーカス取得時のoutlineの変化やボタンが押し込まれた時のボタンがへこむような表示がなにも行われないので事実上使えないですね。
masaさん、ありがとうございます。
残念ながら、フォーム周りはCSS2.1においては挙動が決まっていないので、UAの挙動の変化にあわせて最適な対処法を考える必要があります。
IE8やSafari4のベータがとれてから、また対処法を考えてみます。今度は"フォームにCSS 2009"でしょうか・・・