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

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

Posted at August 21,2014 12:11 AM
Tag:[CSS]

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

1.はじめに

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

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

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

2.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の表示
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の表示
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の表示(ベンダープレフィックス)
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の表示(ベンダープレフィックス)
Chromeの表示

3.その他

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

4.参考サイト

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)