フォームのradioとcheckboxを大きく表示する

2016.02.04

フォームのradioとcheckboxを大きく表示したいという要望があったので、少し調べてみました。
jQueryのプラグインを使ってもよいのですが、今回はradio・checkbox周りにJavaScriptで色々と処理を行っていたので、CSSのみで実装できる方法を試してみます。

サンプルコード

CSS3のtransformを使って拡大する方法です。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="">
    <dl>
        <dt>ラジオ</dt>
        <dd>
            <label for="radio1">
                <input type="radio" name="radio" id="radio1" />ラジオ1
            </label>
            <label for="radio2">
                <input type="radio" name="radio" id="radio2" />ラジオ2
            </label>
            <label for="radio3">
                <input type="radio" name="radio" id="radio3" />ラジオ3
            </label>
        </dd>
    </dl>
    <dl>
        <dt>チェックボックス</dt>
        <dd>
            <label for="checkbox1">
                <input type="checkbox" name="checkbox" id="checkbox1" />チェックボックス1
            </label>
            <label for="checkbox2">
                <input type="checkbox" name="checkbox" id="checkbox2" />チェックボックス2
            </label>
            <label for="checkbox3">
                <input type="checkbox" name="checkbox" id="checkbox3" />チェックボックス3
            </label>
        </dd>
    </dl>
</form>

CSS

1
2
3
4
5
6
input[type="radio"],
input[type="checkbox"] {
    -ms-transform: scale(2);
    transform: scale(2);
    margin-right: 10px;
}

文字にかぶってしまうので、margin-rightで余白を調整しています。
transformを使った場合のデモページ
　

以下が各ブラウザで見た状態ですが、Firefoxだけ荒くなるので注意が必要です。

display-large-radio-and-checkbox01

　

サンプルコード2

通常時とチェック時の画像を作成して、labelの背景に指定する方法です。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="">
    <dl>
        <dt>ラジオ</dt>
        <dd>
            <input type="radio" name="radio" id="radio1" />
            <label for="radio1">ラジオ1</label>
            <input type="radio" name="radio" id="radio2" />
            <label for="radio2">ラジオ2</label>
            <input type="radio" name="radio" id="radio3" />
            <label for="radio3">ラジオ3</label>
        </dd>
    </dl>
    <dl>
        <dt>チェックボックス</dt>
        <dd>
            <input type="checkbox" name="checkbox" id="checkbox1" />
            <label for="checkbox1">チェックボックス1</label>
            <input type="checkbox" name="checkbox" id="checkbox2" />
            <label for="checkbox2">チェックボックス2</label>
            <input type="checkbox" name="checkbox" id="checkbox3" />
            <label for="checkbox3">チェックボックス3</label>
        </dd>
    </dl>
</form>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    background: url(radio_off.png) left center no-repeat;
}
input[type="radio"]:checked + label {
    background: url(radio_on.png) left center no-repeat;
}
input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    background: url(check_off.png) left center no-repeat;
}
input[type="checkbox"]:checked + label {
    background: url(check_on.png) left center no-repeat;
}

radioとcheckboxをdisplay: none;で非表示にして、隣接セレクタでlabelに背景で指定、チェック後の画像は:checkedで指定しています。
背景に指定した場合のデモページ

IE8でも対応する場合、以下の対応が必要になります。

  • radioやcheckboxをdisplay: none;で非表示にするとクリックしてもチェックされなくなるので、opacityを使うかpositionで見えない位置に移動させるなどで対応する。
  • :checkedはIE8で対応していないので、jQueryでclassを付与するなどで対応する。

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031