各ブラウザでのフォーム（inputボタン）の位置や大きさを合わせる

フォームは各ブラウザによってボタンの大きさやマージンの取り方など、千差万別です。私としては少しぐらいの差は気にならないタイプですが、デザイン的にフォームの大きさや位置が決まっていて揃えておかないとレイアウトが崩れるといった状況も出てくると思います。そういう時に参考になる書き方があるので紹介します。

CSS

 
form {
    position: relative;
    margin: 0;
    padding: 0;
    width: 320px;
    height: 64px;
    background-color: #CCCCCC;
}
form p {
    position: absolute;
    top: 12px;
    left: 32px;
    margin: 0;
    padding: 0;
    width: 256px;
    height: 24px;
}
p .search {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 154px;
    height: 24px; /* border-box for IE6 */
    padding: 1px;
    border: 1px solid #676363;
}
head+body p .search {
    width: 150px;
    height: 20px; /* content-box */
}
p .search:focus {
    border: 1px solid #974343;
    background-color: #fee8eb;
}
p .searchsubmit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90px;
    height: 24px; /* border-box */
    padding: 0;
}
 

HTML

 
<form id="" action="">
    <p>
        <input class="search" name="search" size="20" value="" />
        <input class="searchsubmit" type="submit" value="Search" />
    </p>
</form>
 

→inputボタンの位置や大きさを合わせたサンプル

入力ボックス（input type="text"）とボタン（input type="button"またはtype="submit"）は、width/heightにborderやpaddingを含めるかどうかが、ブラウザの描画方法によって変わるみたいで、ならば、positionを使って配置してしまおうという考えです。
詳しい説明ページはこちらのフォームにCSS 2007｜Alternative Design Projectをご覧ください。

blog comments powered by Disqus