ラジオボタン・チェックボックスの大きさをCSSで変更する方法

背景

スマホやタブレットで見ると、デフォルトのラジオボタンやチェックボックスって小さくて使い辛いですよね。そこで、ラジオボタンとチェックボックスの大きさを変更したいものの、jQueryとか画像とかは使いたくない。
ということで、CSSのみで変更する方法を試してみました。

方法

transform:scale()を使うことで出来るようになります。
（下記の例では1.5倍の大きさにしています）

responsive.css

input[type="radio"] , input[type="checkbox"]{
   -webkit-transform: scale(1.5);
   transform: scale(1.5);
   margin-right: 0.5em;

注意

transform:scale()はCSS3ですので、古いブラウザでは対応してません。