チェックボックスのライブラリサイト「CSS Checkbox」

  • 2013-07-12 (金) 8:00
  • CSS

「CSS Checkbox」は様々なデザインのチェックボックスを集めたライブラリサイトです。

CSS Checkbox

css-checkbox

チェックボックスと一口にいっても、こうもデザインがあるかと驚いてしまいます。本記事執筆時点で20種類以上のデザインが紹介されています。いくつかご紹介します。

 

まずはシンプルなものを。

css-checkbox-demo-1

css-checkbox-demo-2

 

チェックマークだけではなく、プラスやバツじるしもあります。

css-checkbox-demo-3

css-checkbox-demo-4

 

マリオのボックスのようなデザインまで!

css-checkbox-demo-5

 

これはとてもシンプルなので、いつか使ってみたい。

css-checkbox-demo-6

 

「CSS Checkbox」の良いところはしっかりとクロスブラウザ対応されているところです。IEにも対応しています。が、どのバージョンまでかは記載がありませんでした。

それでは「CSS Checkbox」の実装方法をご紹介します。まずはHTMLをマークアップします。

<input id="demo_box_1" class="css-checkbox" type="checkbox" />
<label for="demo_box_1" name="demo_lbl_1" class="css-label">Option #1</label>

<input id="demo_box_2" class="css-checkbox" type="checkbox" checked="checked" />
<label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>

<input id="demo_box_3" class="css-checkbox" type="checkbox" />
<label for="demo_box_3" name="demo_lbl_3" class="css-label">Option #3</label>

 

そしてCSSを指定します。

input[type=checkbox].css-checkbox {
  display:none;
}
input[type=checkbox].css-checkbox + label.css-label {
  padding-left:20px;
  height:18px;
  display:inline-block;
  line-height:18px;
  background-repeat:no-repeat;
  background-position: 0 0;
  font-size:15px;
  vertical-align:middle;
  cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -18px;
}
.css-label {
  background-image:url(http://csscheckbox.com/checkboxes/redditor.png);
}

 

たったこれだけ!このように作ることが出来ました。

css-checkbox-sample

 

とても簡単ですね。サイト全体から見たら細かな部品ですが、面白いアクセントになるかもしれません。参考にどうぞ。

 

Home > CSS > チェックボックスのライブラリサイト「CSS Checkbox」

Return to page top