【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.02.07フォトギャラリー藤枝

【デザイン】ボトル&瓶詰めのパッケージデザインまとめ

先日、包装用のラベルシールや包装ツールを手掛けさせていただくことになりました。 今日は、ボトル&瓶詰めのパッケージデザインで参考になったデザインワークスのまとめです。 Le Chat ブラジルにあるデザイン事務所「A Sweety Branding Studio.」...続きを読む

2015.03.06インスピレーション

HTML5の可能性とメリット

HTML5とは? W3C より2008年1月22日にHTML5のドラフト(草案)が発表、2014年には正式に勧告されるのではないかと言われています。 HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ...続きを読む

2015.02.06HTMLコーディング

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室

LGP(ラッキーガールズプロモーション)様WEBサイト制作

静岡を拠点に活動している『LGP(ラッキーガールズプロモーション)』様のWEBサイトを制作いたしました。ラッキーガールズプロモーション様では、カットモデル・サロンモデル・カメラマン派遣・体験モニター・撮影会・モデルイベント・パーティー企画・変身ビフォーアフター、ホームペー...続きを読む

2015.02.06WEBサイト制作