チェックボックスの装飾をブラウザごとに揃える方法(IE7まで対応)

posts_photo
すっきりとしたデザインのフォームをコーディングしているときにぶつかった問題について、忘れてしまいそうなのでメモしておこうと思います。

チェックボックスの見た目はブラウザごとに大分違う

これは日頃コーディングに携わっているとわかると思いますが、ブラウザによってデフォルトのチェックボックスは結構デザインが違います。
まあ、見た目が違うだけならまだ良いんですが最大の問題は余白が違うことです。
特にIE6,7が酷くて余白が出来るうえになぜか背景色までついてきます…。
(IE7なんてもう今更対応していると哀しくなってきますが…)

それらの問題を解消するためのCSSが下記になります。
ちなみにこちらのブログを参考にさせていただきました。
IE6・IE7でできちゃうチェックボックスの周りにできる余白を消す方法 – MemoClip

input[type="checkbox"]{ 
  width:1em;
  height:1em;
  margin:0;
  padding:0;
  vertical-align:middle;
}

このCSSを入れておけば新旧ブラウザのチェックボックスにおける差異を、それなりにリセットして装飾できます。
それにしても、なんでフォーム関連のタグってこんなに装飾しづらいんでしょうね…。

フォームの装飾差異に関しては、こちらの記事も参考になりそうです。
inputのズレを揃えるCSSまとめ

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
-Amazonで見る