すっきりとしたデザインのフォームをコーディングしているときにぶつかった問題について、忘れてしまいそうなのでメモしておこうと思います。
チェックボックスの見た目はブラウザごとに大分違う
これは日頃コーディングに携わっているとわかると思いますが、ブラウザによってデフォルトのチェックボックスは結構デザインが違います。
まあ、見た目が違うだけならまだ良いんですが最大の問題は余白が違うことです。
特にIE6,7が酷くて余白が出来るうえになぜか背景色までついてきます…。
（IE7なんてもう今更対応していると哀しくなってきますが…）
それらの問題を解消するためのCSSが下記になります。
ちなみにこちらのブログを参考にさせていただきました。
IE6・IE7でできちゃうチェックボックスの周りにできる余白を消す方法 – MemoClip
input[type="checkbox"]{
width:1em;
height:1em;
margin:0;
padding:0;
vertical-align:middle;
}
このCSSを入れておけば新旧ブラウザのチェックボックスにおける差異を、それなりにリセットして装飾できます。
それにしても、なんでフォーム関連のタグってこんなに装飾しづらいんでしょうね…。
フォームの装飾差異に関しては、こちらの記事も参考になりそうです。
inputのズレを揃えるCSSまとめ
