Better Check Boxes with jQuery and CSS | Tutorialzine

jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル。
独自のチェックボックスを実装するチュートリアルとサンプルがダウンロード出来ます。

普通のチェックボックスは小さくて連続して押したりする場合は結構ストレスがたまったりしますね。
というわけで次のようなチェックボックスを作る例です。



大きくて押しやすく、画像ベースにデザインされており、なかなかカッコいいというのも特徴。
スクリプト部分にはjQueryプラグインが使われていますが、５０行程のスクリプトなので改造も容易です。

標準のチェックボックスのストレスを取り払い、デザイン性も持ち合わせたチェックボックス導入の際に参考にできます。

関連エントリ

• デザイン性に優れたクリエイティブなフォームデザインのサンプル集
• ログインフォームのデザイン集１００種
• CSSでフォームデザインをする際のチュートリアル
• クリーンなデザインでピュアＣＳＳなフォームを作るサンプル