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

  • 11
    Like
  • 0
    Comment
More than 1 year has passed since last update.

背景

スマホやタブレットで見ると、デフォルトのラジオボタンやチェックボックスって小さくて使い辛いですよね。そこで、ラジオボタンとチェックボックスの大きさを変更したいものの、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ですので、古いブラウザでは対応してません。