はじめに
チェックボックス・ラジオボタンのCSSライブラリ pretty checkboxについて紹介したいと思います。
Qiita内を検索してみましたが、pretty checkbox の記事がなかったので、どなたかの参考になればなーと思います。
classを設定するだけで適用できるので、Javascriptのライブラリよりもお手軽で、個人的には超お気に入りです。
【サンプル】
詳細については公式ドキュメントにて触ってみてください。
- pretty checkbox 公式
使い方
CSSを以下からダウンロードし、HTMLにて読み込みをしてください。
https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css
pretty-checkbox.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><linktype="text/css"rel="stylesheet"href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"><title>Pretty Checkbox</title></head><body><!-- ここにサンプルを載せていきます！ --></body></html>まとめ
いかがでしょうか。
classを付与するだけでAnimationを適用できるなど、手軽にキレイなUIを実装できますので是非使ってみてください！