【JavaScript】チェックボックスとラジオボタンのデザインをカスタマイズする『iCheck』

checkboxes-and-radio-buttons-customization-icheck

フォームなどで使われるチェックボックスとラジオボタンのデザイン。「jQuery」と「Zepto」を使いチェックボックスとラジオボタンのデザインをカスタマイズするライブラリ『iCheck』をご紹介します。

実装イメージ

『iCheck』はいくつかのスキンデータも用意されてあります。ライブラリはデモページからダウンロードできます。

checkboxes-and-radio-buttons-customization-icheck-skin

構成ファイル

『iCheck』を構成ファイルは以下のようになります。CSSフォルダには6種類のスキンデータがフォルダ別に用意されています。

iCheck
├── css/
│   ├── flat/
│   ├── futurico/
│   ├── line/
│   ├── minimal/
│   ├── polaris/
│   ├── square/
│   └── all.css
└── js/
    ├── zepto.js
    ├── icheck.js
    └── jquery.js

利用方法

最初にライブラリの読み込みです。スキンデータのスタイルシート、「jquery.js(またはzepto.js)」、「icheck.js」の3つを設置します。

続けてオプションを設定します。下記の例では、Skinスタイルが「minimal」カラーセット「red」の設定になりま。

/* ライブラリの読み込み・オプション設定 */
<link href="./css/minimal/red.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./js/icheck.js"></script>

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red',
    increaseArea: '20%' // optional
  });
});
</script>

チェックボックスとラジオボタンは下記の記述で実装ができます。

/* HTML記述例 */
<input type="checkbox">
<input type="checkbox" checked>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>

関連記事

インクジェットプリンタでクリーニング機能を実施しても印刷が汚れてしまう

みなさんはインクジェットプリンタで写真などを印刷したときに、印刷した面がインクで汚れていたという経験はございませんか? 写真などをキレイに印刷するため光沢紙を使ったときにインクの汚れがついてしまうとやりきれない気持ちになります。 印刷した面がインクで汚れてしまう場合、インク...続きを読む

2018.03.05プリンタ印刷

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

【WP】モバイル端末用にテーマを切り替えるプラグインのまとめ

先日のGoogleのウェブマスター向け公式ブログ「検索結果をもっとモバイルフレンドリーに」の記事にもあったように、モバイル端末によるウェブサイトの利用がシェアを伸ばしてきていることでウェブサイトのモバイル端末への最適化も重要な課題になってきていると思われます。 今回は、...続きを読む

2015.03.20WordPress

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

【WP】管理画面で操作をしていたらForbiddenが表示された

さくらインターネットのレンタルサーバで、WordPressを用いてWEBサイト(ホームページ)やブログを開設し、WordPressの管理画面を操作中に「Forbidden」が表示されたことありませんか? Forbidden The server refuse to...続きを読む

2018.08.02WordPressさくらインターネットレンタルサーバ