スマートフォンサイトのチェックボックスデザインを色々と試してみました！

16060801 閲覧するデバイスやブラウザによって異なるデザインになってしまうチェックボックス。
ios端末で見た時のデフォルトチェックボックスが見づらい上に押しにくい！との事で、チェックボックスのデザイン変更を色々と試してみました。

16060802

1 デフォルトのチェックボックスを大きくしてみる
2 便利なjQueryプラグイン、iCheck.jsを使ってみました
3 cssでチェックボックスを装飾してみる
4 おわりに

デフォルトのチェックボックスを大きくしてみる

input[type="radio"],
input[type="checkbox"] {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

DEMOページ

見た目そのままで大きさを1.5倍に変更できます。
もちろんスマートフォンで見ても各ブラウザでのチェックボックスが拡大されています。
これでも十分に押しやすくはなったのですが、iosでのチェックボックスが更に不自然に…。とりあえず的な対処としては良いかもしれませんね。

便利なjQueryプラグイン、iCheck.jsを使ってみました

導入するだけで、htmlを変更せずに良い感じのチェックボックスが反映されます。
たくさんファイルは用意されていますが必要なのは使うcss・img、あとはjQueryを読み込みます。

<link rel="stylesheet" href="skins/minimal/green.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.icheck.min.js"></script>
<script>
    $(function(){
        $('input').iCheck({
            checkboxClass: 'icheckbox_minimal-green',
            radioClass: 'iradio_minimal-green',
            increaseArea: '10%', // optional
            cursor: true // optional
        });
    });
</script>

あとcssの画像パスも変更するのを忘れずに！
選べるデザインも豊富でなかなか素敵です。今回はgreenをチョイス！

16060804

なかなか良いですね！！
ただ…サイト制作時に導入はアリでしょうが大規模サイトで後から導入はちょっと面倒。
ほとんど一括管理してるとはいえ、全てのページに必要な物を読み込まなければいけません。今回はパス！

cssでチェックボックスを装飾してみる

画像を使うのも良いですが、どうやらcssだけでチェックボックスを作成できるようなので試してみました。

input[type="checkbox"] {
    border: 1px solid #aaaaaa;
    vertical-align: -8px;
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    width: 26px;
    height: 26px;
    /*Other Browser*/
    background: #e2e2e2;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #ffffff),
        color-stop(1.00, #e2e2e2)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #e2e2e2 100%
    );
}

input[type="checkbox"]:checked {
    /*Other Browser*/
    background: #99cc00;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #99cc00),
        color-stop(1.00, #87b400)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #99cc00 0%,
        #87b400 100%
    );
    border: 1px solid #336600;
}

input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 16px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    width: 10px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
}

input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 16px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    width: 16px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
}

これ良いですねー。
今度からスマホサイト制作時に導入を考えたい方法です！
PCだとChromeで上手く表示されるようなので確認はそちらを使ってください。
DEMOページ