小粋空間  -  a cheap joke and a play on words site

チェックボックスやラジオボタンを大きくする方法

チェックボックスやラジオボタンを大きくする方法を紹介します。

１．はじめに

デフォルトのチェックボックスとラジオボタンのサイズは小さいです。

デフォルトのチェックボックスとラジオボタン

で、jQueryなどで独自デザインに変更して大きく見せているサイトは多いと思いますが、CSSで簡単に大きくできないか調べてみました。

２．CSSでチェックボックスやラジオボタンを大きくする

まずサンプルのHTMLを示します。

<input type="checkbox" id="foo" name="foo" /><label for="foo">チェックボックス</label>
<input type="radio" id="bar_1" name="bar" /><label for="bar_1">ラジオボタン1</label>
<input type="radio" id="bar_2" name="bar" /><label for="bar_2">ラジオボタン2</label>

IEおよびChromeの場合、widthプロパティ/heightプロパティで大きくできるようです（IE8以前は未対応らしい）。

input[type=checkbox] {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
input[type=radio] {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

widthとheightの値が異なる場合、小さい方の値を採用するようです。

またvertical-alignプロパティは必須ではありませんが、テキストとの垂直方向の位置を合わせるために設定しています（以降のサンプルでは省略）。

Chromeの表示

上記の設定で「IE9も有効になる」という記事をみかけましたが、当方では有効にならず、style属性に設定したところ有効になりました。

<input type="checkbox" id="foo" name="foo" style="width:30px;height:30px;" /><label for="foo">チェックボックス</label>
<input type="radio" id="bar_1" name="bar" style="width:30px;height:30px;" /><label for="bar_1">ラジオボタン1</label>
<input type="radio" id="bar_2" name="bar" style="width:30px;height:30px;" /><label for="bar_2">ラジオボタン2</label>

IE9の表示

Firefoxではwidthプロパティ・heightプロパティが効きませんが、以下のベンダープレフィックスで大きくすることができます。

input[type=checkbox] {
  -moz-transform-origin: right bottom;
  -moz-transform: scale( 2 , 2 );
}
input[type=radio] {
  -moz-transform-origin: right bottom;
  -moz-transform: scale( 2 , 2 );
}

Firefoxの表示（ベンダープレフィックス）

Chromeの場合、下記のベンダープレフィックスでも大きくすることができます。

input[type=checkbox] {
  -webkit-transform-origin: right bottom;
  -webkit-transform: scale( 2 , 2 );
}
input[type=radio] {
  -webkit-transform-origin: right bottom;
  -webkit-transform: scale( 2 , 2 );
}

Chromeの表示（ベンダープレフィックス）

３．その他

上記の他、元のチェックボックス・ラジオボタンを非表示にして画像やCSSなどで代替させる方法もありますが、それらの方法については大きくすることだけが目的ではないため、別のタイトルでエントリーしたいと思います。

４．参考サイト

参考サイトは下記です。ありがとうございました。

• checkboxをcssで大きくする
• チェックボックス、ラジオボタンを大きく表示して使う：その２
• チェックボックスの拡大