こんにちは。
今回は様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」です。
CSSを読み込んで、デモのHTMLをコピペするだけで、シンプルなチェックボックスが実装できるライブラリを紹介します。
様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」！
CSS Checkbox Library
「CSS Checkbox Library」をダウンロードしてみよう！
https://github.com/hunzaboy/CSS-Checkbox-Libraryにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「CSS Checkbox Library」を設置してみよう！
checkboxes.min.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/checkboxes.min.css"> |
html部分を記述します。
デモにアクセスして実装したいチェックボックスの右上の「HTML」のボタンをクリックすると必要なhtmlをコピーできますよ。
1 2 3 4 | <div class="ckbx-square-1"> <input type="checkbox" checked id="ckbx-square-1-2" value="0" name="ckbx-square-1"> <label for="ckbx-square-1-2"></label> </div> |
インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン
いかがでしたか。簡単にかっこいいチェックボックスが実装できるのでいいですね。
以上で様々なおしゃれチェックボックスが実装できるスタイルシート「CSS Checkbox Library」でした。
