[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox

チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。

角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。

デモのキャプチャデモのアニメーション

Pretty Checkbox
Pretty Checkbox -GitHub

Pretty Checkboxのデモ

デモは想像していたよりずっと多く、正直驚きました。
しかも、どれも実用性が高く、簡単に実装できるのが、よいですね。

デモのキャプチャ

デモ: デフォルト、角丸、丸

デモのキャプチャ

デモ: スイッチ、カラー

デモのキャプチャ

デモ: アイコン、SVG、画像

デモのキャプチャ

デモ: アニメーション

デモのキャプチャ

デモ: ラジオボタン

Pretty Checkboxの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

CSSファイルは、CDNでも用意されています。

Step 2: HTML

基本となる書式は、チェックボックスやラジオボタンを内包するラッパーのclassに「pretty p-default」を記述します。あとはデザインに合わせて、classを追加します。例えば角丸だったら「p-curve」を記述します。

デモのキャプチャ

デフォルトと角丸のスタイル

top of page

©2017 coliss