[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox
Post on:2017年11月7日
sponsors
チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。
角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。
Pretty Checkbox
Pretty Checkbox -GitHub
Pretty Checkboxのデモ
デモは想像していたよりずっと多く、正直驚きました。
しかも、どれも実用性が高く、簡単に実装できるのが、よいですね。
デモ: デフォルト、角丸、丸
デモ: スイッチ、カラー
デモ: アイコン、SVG、画像
デモ: アニメーション
デモ: ラジオボタン
Pretty Checkboxの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="pretty-checkbox.min.css"> </head> |
CSSファイルは、CDNでも用意されています。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"> </head> |
Step 2: HTML
基本となる書式は、チェックボックスやラジオボタンを内包するラッパーのclassに「pretty p-default」を記述します。あとはデザインに合わせて、classを追加します。例えば角丸だったら「p-curve」を記述します。
|
1 2 3 4 5 6 |
<div class="pretty p-default"> <input type="checkbox" /> <div class="state"> <label>Check</label> </div> </div> |
デフォルトと角丸のスタイル
sponsors
