チェックボックスをおしゃれにするCSSスニペット25選。アニメーションが刺さる！
フォームのデザインをかっこよくするチェックボックスのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にチェックボックスはデフォルトのデザインが地味で押しにくいことも多いですので、装飾することで改善できます。
本記事ではフォームの中でも「チェックボックス」に焦点を当て、おしゃれなCSSスニペットをまとめました。
通常のチェックボックスだけでなくトグルボタンやスイッチ形式のデザインもあります。
実用性重視。シンプルなチェックボックスでユーザビリティを向上できるCSSデザイン例。
クリックしやすいシンプルなデザインのチェックボックス。
See the Pen Simple CSS Checkboxes with Font Awesome by James Barnett (@jamesbarnett) on CodePen.
CSSのソースコード量が非常に少ないですが、シンプルでとても見やすいデザインのチェックボックスです。
フラットな感じですし、チェックボックスクリック時の枠も出ませんので、どんなサイトデザインにも合いそうです。
マウスオーバーやクリック時に簡単な動きを付けたシンプルなチェックボックス。
See the Pen Custom checkboxes with CSS only by Geoffrey Crofte (@CreativeJuiz) on CodePen.
CSSで装飾していないチェックボックスは小さくてクリックしにくいことが多いです（環境によるかと思いますが）。
本スニペットではチェックボックスの大きさを少し大きくするだけでなく、マウスオーバーやクリック時に動きを加えています。シンプルさを保ちつつ使いやすいチェックボックスデザインになっています。
また、読み取り専用時のデザインも合わせて用意してあるのが良いです。
クルっと回転しながらＯＮになるアニメーションのチェックボックス。
See the Pen Google material style checkbox (css only) by Sam (@Sambego) on CodePen.
チェック時にチェックマークがクルっと45度回転しながらＯＮになるチェックボックスです。ＯＦＦにする際にはチェックボックスの枠が点滅します。非常に楽しいアニメーションのチェックボックスです。
ＯＦＦのときに少しチェック枠が見えにくいのがデメリットでしょうか。
十字マークがクルっと回転するアニメーションのチェックボックス。
See the Pen Styled Checkbox by Chris Ota (@chrisota) on CodePen.
十字マークがクルっと回転してON/OFFされるチェックボックスです。
見やすいデザインですが、ON/OFFの状態が少しわかりにくいところがデメリットです。
チェックするとボックスの枠線が消えるデザイン。
See the Pen Custom checkbox by Valery (@valerypatorius) on CodePen.
クリックしてＯＮになるとチェックボックスの枠線が消えてチェックマークのみになります。非常にスタイリッシュ。
チェックすると波動を出しながら、ボックスの枠線が消える。
See the Pen Google Material Paper-Checkbox by Jason Mayes (@jasonmayes) on CodePen.
こちらも、クリックしてＯＮになるとチェックボックスの枠線が消えてチェックマークのみになります。クリック時に波動が出ますし、こちらも非常にスタイリッシュ。
シンプルなチェックボックス・ラジオボタン・ドロップダウン一式のセット。
See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.
クリック時に青色に変化するだけのシンプルなチェックボックスですが、チェックボックス・ラジオボタン・ドロップダウン一式がセットになっています。コントロールのイメージをそろえたいときには最適だと思います。
大きくて押しやすいチェックボックス・ラジオボタンのセット。
See the Pen Touch Friendly Bootstrap Radio buttons and Checkboxes by Brian Sassaman (@BrianSassaman) on CodePen.
大きくて淡い色合いで使いやすそうなチェックボックス・ラジオボタンのセットです。
CSSソースコードも少なく見やすいですので、色を替えたりカスタマイズしやすいです。
カラー・マークのバリエーションが豊かなデザインサンプル。
See the Pen Wobble Checkboxes by Tamino Martinius (@Zaku) on CodePen.
様々なカラー・大きさ・マーク形式のチェックボックスデザインがまとまっているサンプルです。クリック時に少しプルっと動くのが素敵なデザインだと思います。
トグルボタン・スイッチ形式のチェックボックス。押しやすくスマホに最適なＵＩ。
シンプルなトグルボタン・スイッチ形式のチェックボックス。
See the Pen simple checkbox switcher by Artyom (@artyom-ivanov) on CodePen.
シンプルなトグルボタン・スイッチ形式のチェックボックスです。クリック時の動きもスムーズですし、CSSソースコード量も少なく良いです。
ON/OFFが分かりやすいスイッチタイプのデザイン。
See the Pen Accessible & Skeuomorphic Checkbox/Radio jQuery plugin by Simon Goellner (@simeydotme) on CodePen.
ON/OFFがとても分かりやすいスイッチタイプのデザインです。状態がとても把握しやすいですので、オススメできます。
クリックで点滅するトグルタイプのデザイン。
See the Pen Checkbox Trickery: Simple Toggle by Will Boyd (@lonekorean) on CodePen.
クリックするとチェックと色が変わります。簡単なCSSソースコードで実現していますけど、デザイン性が高いですね。
Pure CSSのトグルボタン・スイッチ形式のチェックボックス。
See the Pen Flat Checkboxes by Juanjo Fernandez (@juanjofr) on CodePen.
Pure CSSで作られているトグルボタン・スイッチ形式のチェックボックスです。簡単なソースコードでトグルをどのように作ればいいのかがわかりやすいです。
クルっと回りながらスライドするスイッチ形式チェックボックス。
See the Pen Full CSS checkbox by Timothee Guignard (@TimGuignard) on CodePen.
非常にデザイン性が高いスイッチ形式チェックボックスです。見てて楽しいですし、ON/OFFのチェック状態もわかりやすいという優れもの。
ON/OFFのチェック状態がわかりやすいスイッチボタン。
See the Pen Checkbox personnalisation with SVG icons by Gaëtan Bonnot (@GaetanBt) on CodePen.
SVGアイコンを使ったON/OFFのチェック状態がわかりやすいスイッチボタン。
多様なトグルボタン・スイッチチェックボックスまとめ。
See the Pen Accessible toggle-style checkbox by Chris Hart (@personable) on CodePen.
様々なトグルボタン・スイッチのデザインサンプル。
これは本当にチェックボックス！？訪問者の心に刺さる独創的なデザイン。
物凄く大きい上に、チェック時に大げさなアニメーションをするチェックボックス。
See the Pen Animated CSS3 Checkbox by Jimmy Gillam (@theigmo87) on CodePen.
非常に大きくインパクトのあるチェックボックスです。クリック時もチェックマークがダイナミックにアニメーションしつつ、緑色のチェックボックスに変化します。
規約確認など目立たせたい部分のチェックボックスに良いかと思います。
クリック時にラベルを覆い囲むチェックボックス・ラジオボタン。
See the Pen Pure CSS Fancy Checkbox/Radio by Rau (@raubaca) on CodePen.
通常のチェックボックス・ラジオボタンのように見えますが、クリックするとチェックが拡大して項目ラベルを覆い囲みます。非常に面白い動きをするコントロールデザインです。
ただし、チェックONであることが少しわかりにくいかもしれませんね。
自己主張が強いチェックボックス。
See the Pen Pure CSS Animated Checkbox by Paweł Durczok (@north-of-rapture) on CodePen.
チェック時に大きくなり、チェックされていることがわかりやすいですね。また、マウスオーバーでもチェックマークが出てくるので、クリックしたくなります。自己主張が強いチェックボックスです。
自己主張が強いチェックボックス②。
See the Pen checkbox with mo.js 💵 by Mike Quinn (@mprquinn) on CodePen.
クリック時にピカっと光ってＯＮになります。操作感の楽しいチェックボックスです。
プルっとしながら動くスライムボタン。
See the Pen Fluid Checkboxes by Bjorn (@BjornRombaut) on CodePen.
プルっとしながら動くスライムのようなチェックボックスです。
チェックボックスが取り消し線に変化する。
See the Pen ☑️ CSS-only Todo List Checkbox Animation by Shaw (@shshaw) on CodePen.
クリック時にチェックボックスが取り消し線に変化します。ただし、ONになってるのに消されちゃうのはちょっと違和感…。むしろOFFのときに取り消しにした方が良いような気もしますが…。
3Dボールが動くようなトグルボタン。
See the Pen 3D toggle – click it! by Ana Tudor (@thebabydino) on CodePen.
溝の上をボールが転がっているようなデザインです。非常に面白いです。
バラバラに分解⇒再構築される派手なアニメーション。
See the Pen Reconstructed checkbox #CodePenChallenge cpc-checkboxes by Stephen Lee (@abcretrograde) on CodePen.
クリックするとバラバラに分解されて再構築されながらON/OFFされます。ド派手です！。
完全にレバースイッチ。
See the Pen Skeuomorphic Lever Checkbox by Jon Kantner (@jkantner) on CodePen.
もう完全にレバーですね。
ライトセイバーのようなチェックボックス。
See the Pen Pure CSS3 Star Wars Lightsaber Checkboxes by Nicholas Cerminara (@ncerminara) on CodePen.
クリックでライトセイバーが出てきます。遊び心満載。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
