ユーザビリティのよいチェックボックス・ラジオボタンのCSS見本53選!

Webサービスを使っていて、入力フォームのチェックボックスやラジオボタンで自分がどれを選択したのかがひと目でわかるようなデザインだと気遣いのきいているサービスだなと思わず感心してしまいますね。

そんなユーザビリティのよいデザインをCodePenから53個ピックアップしたのでタイプ別にまとめていきます。

今回選んだデザインは全てjsは一切使っていないCSSのみで構成されているものばかりを集めてみました。
デザインに参考にしてみてください。

[スポンサーリンク]

もくじ

アニメーションが派手なデザイン
ポップなデザイン
クールなデザイン
シックなデザイン

See the Pen Google Dots Radio Buttons by Victor Freire (@victorfreire) on CodePen.

See the Pen Fun with CSS3 by MIRobin (@mirobin) on CodePen.

See the Pen Custom CSS3 Radio Button - Radiosplosion by sodapop (@sodapop) on CodePen.

See the Pen Happy little checkboxes by Branko Stancevic (@landb) on CodePen.

See the Pen Card Check Box by webopixel (@webopixel) on CodePen.

See the Pen Fancy Icon Menu by Ryan Smith (@RYJASM) on CodePen.

See the Pen Custom bootstrap check box and radio button by Ronty06 (@Ronty06) on CodePen.

See the Pen Sliding radio buttons by Oguzhan Cansever (@oggyindahouse) on CodePen.

See the Pen Three state radio button by Davide Sandonà (@Davide_sd) on CodePen.

See the Pen Radio Button by Andreas Storm (@andreasstorm) on CodePen.

See the Pen Radio Button Input Scale by Caleb Duren (@calebduren) on CodePen.

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.

See the Pen PURE CSS ANIMATED TOGGLES by Brady Sammons (@soulrider911) on CodePen.

See the Pen CSS "Ripple/Wave" checkbox and radio button by Matt Sisto (@msisto) on CodePen.

See the Pen CSS & Radio Button Star Rating by Adam Orchard (@orchard) on CodePen.

See the Pen Radio Button Big Square [Pure CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.

See the Pen Animated Radio Button Color Selector by Edward McIntyre (@twittem) on CodePen.

See the Pen True or False SVG Radio Buttons by Marcus Hall (@flurrd) on CodePen.

See the Pen Pure CSS Radio Button Tiles by Casey Callow (@caseycallow) on CodePen.

See the Pen Touch Friendly Bootstrap Radio buttons and Checkboxes by Brian Sassaman (@BrianSassaman) on CodePen.

See the Pen Form with SVG radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen.

See the Pen Replacing Radio Buttons by SitePoint (@SitePoint) on CodePen.

See the Pen Custom checkboxes / radio buttons #1 by Sam (@Sambego) on CodePen.

See the Pen Custom checkbox, radio button w/ css by iharosi (@iharosi) on CodePen.

See the Pen Animated switch for radio buttons (css only) by Fredrik Jensen (@fredjens) on CodePen.

See the Pen Radio Button Animatio by Antoinette Janus (@acjdesigns) on CodePen.

See the Pen Snacks? Flat radio button inputs... by Kris Hedstrom (@kristofferh) on CodePen.

See the Pen An alternative radio button group by maar-ten (@maar-ten) on CodePen.

See the Pen Css Radio Button Inspiration by Irko Palenius (@ispal) on CodePen.

See the Pen Material Design - Radio Button CSS [SCSS] by Lorenzo D'Ianni (@lorenzodianni) on CodePen.

See the Pen Almost Material Check Boxes by Connor (@CKH4) on CodePen.

See the Pen IOS7 Check boxes by Cédric Néhémie (@abe33) on CodePen.

See the Pen CSS Awesome Task List Check Box by Faizan Asad (@faizanasad) on CodePen.

See the Pen Material Design Checkbox CSS only by Hannes Kamecke (@hansmaad) on CodePen.

See the Pen Custom Check Boxes by Zachary Price (@zachary_price) on CodePen.

See the Pen Tron form buttons by Dan Chilton (@bjork24) on CodePen.

See the Pen DevTips animated check-box scss by defaultuser_ (@Defaultuser_) on CodePen.

See the Pen personalized check box (label) by Projekt89 (@Mlody89) on CodePen.

See the Pen Check Box by Santanu Biswas (@James97) on CodePen.

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.

See the Pen Check boxes by Craig Sullivan (@craigs) on CodePen.

See the Pen Quick Tip: Easy CSS3 Checkboxes and Radio Buttons by Envato Tuts+ (@tutsplus) on CodePen.

See the Pen Form Elements -Check box, Radio buttons, input fields, select menus by Edrees (@Edrees21) on CodePen.

See the Pen custom check box by Suriya.g (@suriyag) on CodePen.

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.

See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.

See the Pen CSS Radio Buttons and Checkboxes: Custom icon by Karen Menezes (@imohkay) on CodePen.

See the Pen Bouncy Radio Buttons! by Joe Ringenberg (@jringenberg) on CodePen.

See the Pen Check-Mate - Custom Check Box Styling by Brian Revie (@expressivemedia) on CodePen.

See the Pen check boxes by Alex Kale (@awkale) on CodePen.

See the Pen BNaEOm by Preethi Ranjit (@rpsthecoder) on CodePen.

See the Pen Radio & Check by Marko Siilak (@siilak) on CodePen.

See the Pen material ui - radio button by Balázs Suhajda (@suhajdab) on CodePen.

See the Pen Responstable 2.0: a responsive table solution by Jordy van Raaij (@jordyvanraaij) on CodePen.

さいごに

さすがは困った時のCodePenですね。どのチェックボックス・ラジオボタンも素晴らしい!

チェックボックス。ラジオボタンといっても意外とたくさんデザインがあるものですね。
気になったものはありましたか?

シックなデザインのものは使い勝手がよさそうでどんなサイトやアプリでも使えそうですが、個人的にはポップなデザインが好みですね。

みなさんも自分のお気に入りをみつけてみて下さい!

それでは!