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

デフォルトのチェックボックスを大きくしてみる
input[type="radio"], input[type="checkbox"] { -webkit-transform: scale(1.5); transform: scale(1.5); }
見た目そのままで大きさを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をチョイス!
なかなか良いですね!!
ただ…サイト制作時に導入はアリでしょうが大規模サイトで後から導入はちょっと面倒。
ほとんど一括管理してるとはいえ、全てのページに必要な物を読み込まなければいけません。今回はパス!
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ページ
おわりに
フォーム周りのデザインって結構悩むところだと思います。
デフォルトがもう少し使いやすければいいのですが…(‘A`)
他にも画像を使う方法などもあるので色々と試して選ぶのが良いかもしれませんね。
導入の際に参考になれば幸いです。
参考にさせていただきました
スマートフォンサイト制作時に覚えておきたいCSS 15 | NxWorld
iCheck.js設置してみた|jQueryプラグイン | wald-grun
