はじめに

チェックボックス・ラジオボタンのCSSライブラリ pretty checkbox について紹介したいと思います。
Qiita内を検索してみましたが、pretty checkbox の記事がなかったので、どなたかの参考になればなーと思います。

classを設定するだけで適用できるので、Javascriptのライブラリよりもお手軽で、個人的には超お気に入りです。

【サンプル】

詳細については公式ドキュメントにて触ってみてください。

pretty checkbox 公式
- https://lokesh-coder.github.io/pretty-checkbox/

使い方

CSSを以下からダウンロードし、HTMLにて読み込みをしてください。
https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css

pretty-checkbox.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link type="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を実装できますので是非使ってみてください！

会社紹介

株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。

詳しくは公式サイトまでお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/