【備忘録】検索フォームをCSSで整形

PC・Web関連


→ http://www.usamimi.info/~sutara/sample/form02.html


こんな感じのを作ります。
最終的なソースは以下になりました。
最新のブラウザならおそらく問題なく表示されるはずです。


【HTML】



<form>

  <input type="text"   class="text" />

  <input type="submit" class="submit" value="検索" />

</form>


【CSS】



.text{

  float:left;

  display:block;
  margin:0;

  margin-right:10px;

  padding:0 2px;

  line-height:1;
  border:1px solid #555;
  background:#fff;

  font-size:15px;
  width:174px;/* content-box */

  height:19px; /* content-box */

}

.submit{

  float:left;

  display:block;
  margin:0;

  padding:0;

  line-height:1;

  border:1px solid #333;

  background:#ccc;
  font-size:13px;

  color:#000;
  width:60px;/* border-box */

  height:21px;/* border-box */

  cursor:pointer;

}


【注意点】


  1. テキストボックスとボタンに、それぞれ『display:block;float:left;』を指定する。


    理由は、インライン要素のままでは、FirefoxとSafariとOperaで

    奇妙な余白が生まれるからです。


    各ブラウザで、ブロック要素とインライン要素とで比較しました。

    画像の上がブロック要素、下がインライン要素です。


    ■検証用デモページ

    → http://www.usamimi.info/~sutara/sample/form01.html

    IE8
    Firefox3
    Opera9.6
    Safari4(beta)
    Chrome1


    また、インライン要素の場合は


    
<input type="text" class="text" /><input type="submit" class="submit" value="検索" />
    のように改行せずに続けて書かないと、当然余分な空白が生まれてしまいます。


  2. 最近のブラウザでは、
    テキストボックス content-box 要素全体の幅 = width + padding + border
    ボタン border-box 要素全体の幅 = width
    であるそうなので、widthとheightの指定の際に注意すること。

  3. テキストボックスでは、上下のパディングは指定しなくてよい、と思います。

    heightさえ指定していれば。

    font-size + 上下paddingのがheightの値に近くなると、Firefoxにおいて

    テキストボックス内の文字列が上下の端に隠れるほどスクロールできるように

    なってしまいます。