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

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

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

Pretty Checkbox
Pretty Checkbox -GitHub

• Pretty Checkboxのデモ
• Pretty Checkboxの使い方

Pretty Checkboxのデモ

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

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

デモ: スイッチ、カラー

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

デモ: アニメーション

デモ: ラジオボタン

Pretty Checkboxの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

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

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