An HTML & CSS checkbox or radio button is an essential part of most forms used in your websites or apps. So it’s important to get them right. By sprinkling a bit of CSS or JS over them, you can really get surprising and delighting results. ✅
So here’s a list of some of the best CSS checkboxes I found on CodePen that will look great in your forms.
Life Paradox | CSS Checkboxes
Saw this and thought it would be cool to recreate it with CSS and JS.
See the Pen Life Paradox | CSS Checkboxes by havardob (@havardob) on CodePen.
Pretty Pure CSS Checkboxes & Radio Buttons
just some nice checkboxes and radio buttons using css, with animations and customisable size and color.
See the Pen Pretty Pure CSS Checkboxes & Radio Buttons by cesque (@cesque) on CodePen.
Animated CSS Checkboxes & Radio Buttons
Animated CSS checkboxes and radio buttons with fallback for browser with no support to animate dash-offset and dash-array properties.
See the Pen Animated CSS Checkboxes & Radio Buttons by TommiTikall (@TommiTikall) on CodePen.
Pure CSS Animated Checkbox
A pure HTML & CSS animated checkbox created for the audience of North of Rapture blog.
See the Pen Pure CSS Animated Checkbox by north-of-rapture (@north-of-rapture) on CodePen.
Jelly Checkbox
A jelly-like checkbox animation using only pure CSS.
See the Pen Jelly Checkbox by andreasstorm (@andreasstorm) on CodePen.
Simple Checkbox Switcher
Some simple checkbox switchers with labels that have a cartoonish look and feel.
See the Pen Simple Checkbox Switcher by Art292 (@Art292) on CodePen.
Full CSS Checkbox
A full CSS checkbox button with toggle rolling switch.
See the Pen Full CSS Checkbox by TimGuignard (@TimGuignard) on CodePen.
Completely CSS: Custom checkboxes, Radio Buttons & Select Boxes
In this example, we have four checkboxes: checked, unchecked, disabled and disabled and checkedCodePen demo for: http://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
See the Pen Completely CSS: Custom checkboxes, Radio Buttons & Select Boxes by KenanYusuf (@KenanYusuf) on CodePen.
Realistic CSS Switch Using Checkbox
A realistic CSS switch using HTML checkboxes.
See the Pen Realistic CSS Switch Using Checkbox by nathantaylor (@nathantaylor) on CodePen.
Happy Little Checkboxes (Updated)
Happy little jello checkboxes made with pure CSS animation.
See the Pen Happy Little Checkboxes (Updated) by landb (@landb) on CodePen.
Pure CSS Toggle Buttons
Multiple pure CSS toggle buttons with different animations: light, iOS, skewed, flat or flip.
See the Pen Pure CSS Toggle Buttons by mallendeo (@mallendeo) on CodePen.
All-CSS Toggle Switch (Checkbox Hack)
An all-CSS toggle switch made with an HTML checkbox hack.
See the Pen All-CSS Toggle Switch (Checkbox Hack) by mburnette (@mburnette) on CodePen.
Switchy Checkbox
A flat switchy checkbox made with CSS and JS.
See the Pen Switchy Checkbox by tiffachoo (@tiffachoo) on CodePen.
Google Material Style Checkbox (CSS Only)
Checkboxes based upon the material design implementation of the polymer checkboxes.
See the Pen Google Material Style Checkbox (CSS Only) by Sambego (@Sambego) on CodePen.
Custom CSS Checkbox
I've never had to make custom checkboxes but after the last shop talk podcast episode I figured I might as well try.
See the Pen Custom CSS Checkbox by derekmorash (@derekmorash) on CodePen.
Jquery Toggle Button
iOS style toggle switch button using jQuery and CSS.
See the Pen Jquery Toggle Button by nikhil8krishnan (@nikhil8krishnan) on CodePen.
Brightness and Gamma (Day & Night) Switch
A night and day switch using JS and some CSS.
See the Pen Brightness and Gamma (Day & Night) Switch by JosephShenton (@JosephShenton) on CodePen.
Variable Based Inputs – Checkbox/Radio/Toggle Switches
A collection of variable based inputs such as HTML checkboxes, radio buttons and toggle switches.
See the Pen Variable Based Inputs – Checkbox/Radio/Toggle Switches by jcgilmore2 (@jcgilmore2) on CodePen.
Flat UI – Checkbox Fix
Flat UI checkbox bug fixed now! Fork based on Flat UI – Custom checkboxes by @geoffrey_crofte.
See the Pen Flat UI – Checkbox Fix by ARS (@ARS) on CodePen.
Gooey CSS Toggle Switch
Gooey checkbox example using CSS only.
See the Pen Gooey CSS Toggle Switch by onediv (@onediv) on CodePen.
Pure CSS Toggles
Getting fun with some animations & transitions :)
See the Pen Pure CSS Toggles by rgg (@rgg) on CodePen.
Checkbox Style 2.0 With SCSS
A clean-looking checkbox style using SCSS.
See the Pen Checkbox Style 2.0 With SCSS by lorenzodianni (@lorenzodianni) on CodePen.
Using Pseudo Elements for Input Styling
On supported browsers, the pseudo elements can be used to style the inputs for checkbox/radio for their checked and unchecked states while still providing a functional fallback for browsers that don't support input styling without doing weird resets. Most notable issue is pseudo elements not existing for inputs on firefox. Check it out in Chrome & Safari.
See the Pen Using Pseudo Elements for Input Styling by abergin (@abergin) on CodePen.
Custom Checkbox With SVG Marker
Requirements: Need custom checkboxes instead of native in IE9, Chrome, Safari and Firefox.
See the Pen Custom Checkbox With SVG Marker by rolchau (@rolchau) on CodePen.
CSS Checkbox Animation
Only CSS animation on hover and not checked checkboxes.
See the Pen CSS Checkbox Animation by parcon (@parcon) on CodePen.
Motion Checkbox
A motion checkbox remake of Mark Lamb's Dribbble shot before bedtime! :)
See the Pen Motion Checkbox by JonasBadalic (@JonasBadalic) on CodePen.
Morphing CSS Checkbox
A morphing HTML checkbox using just CSS transitions.
See the Pen Morphing CSS Checkbox by sderoij (@sderoij) on CodePen.
Checkcircle #codevember 1
Simple checkbox with CSS transition for it's states.
See the Pen Checkcircle #codevember 1 by abensur (@abensur) on CodePen.