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

16060802

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

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

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


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

16060803 導入するだけで、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でチェックボックスを装飾してみる

16060805 画像を使うのも良いですが、どうやら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ページ


おわりに

フォーム周りのデザインって結構悩むところだと思います。
デフォルトがもう少し使いやすければいいのですが…(‘A`)
他にも画像を使う方法などもあるので色々と試して選ぶのが良いかもしれませんね。
導入の際に参考になれば幸いです。


参考にさせていただきました

スマートフォンサイト制作時に覚えておきたいCSS 15 | NxWorld
iCheck.js設置してみた|jQueryプラグイン | wald-grun

この記事を書いた人

きどっち
きどっち
webデザイン担当。
起きてる時間はPCかスマホの画面を見ています。
ゲームも色々やってます。

でも視力は抜群です(^ν^)