はじめに
チェックボックス・ラジオボタンの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>
<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を実装できますので是非使ってみてください！