If you’re looking for a collection of custom CSS checkboxes to spice up your forms, You don’t want to search anymore, because you’ve found it. There are over 53 different custom designs of checkboxes here ready to be used on your site. Most of us are familiar with checkboxes, they’ve been around for decades. You may also know that checkboxes can be styled using CSS. What you may not know is that it’s possible to create your own customized checkboxes.
01 of 53Custom CSS checkbox
02 of 53Pencil and Paper Checkboxes
About the Code
A checkbox concept that simulates filling checkboxes and erasing checks in real life
Update 1/9/20: Reduced JS code
More info: Link
Dependency: fonts.googleapis
03 of 53FlipBoxes
04 of 53Custom CSS Checkboxes and radio buttons with background image
05 of 53Custom Checkbox group styled as tiles
06 of 53Animated Fill and Strikethrough Custom Checkboxes
About the Code
A checkbox concept where the unchecked state is secretly a square covering the checkmark. When checked, the fill is shaped into a line and penetrates the label text. The reverse happens when unchecked again.
More info: Link
Dependency: –
07 of 53Stylish Input
08 of 53Interactive Soft Drink Lid
About the Code
A realistic interactive plastic lid made with checkboxes and CSS. The bubbles can even become slightly worn after being pressed once!
More info: Link
Dependency: fonts (Karla:[email protected];700, Inconsolata)
09 of 53Custom CSS Checkbox
10 of 53Custom Checkbox
11 of 53Custom Checkbox
12 of 53Custom checkbox with SVG marker
About the Code
Requirements: Need custom checkboxes instead of native in IE9, Chrome, Safari, and Firefox. Nice to have: Animating checkbox marker (Works in newer versions of firefox, chrome, and safari).
Updated on February 5, 2016
More info: Link
Dependency: –
13 of 53Responsive Custom checkbox
About the Code
Updated on July 25, 2014
More info: Link
Dependency: font-awesome.min.css, jquery.min.js
14 of 53Cool Custom Checkbox with SVG!
15 of 53Completely CSS: Custom checkboxes, radio buttons, and select boxes
16 of 53CUSTOM ANIMATED CHECKBOXES
17 of 53CSS-Only Custom Animated Checkbox
18 of 53Simple Glyphicon Favorite Button
19 of 53Custom CSS Checkbox
20 of 53#CodePenChallenge | Pure CSS Checkboxes
21 of 53Custom checkbox using CSS3
22 of 53Custom CSS Checkbox animation – #16
23 of 53Pure CSS Checkbox Toggle Buttons | ON-OFF Switches
24 of 53Squishy Toggle Buttons
25 of 53CSS Checkbox Styles
About the Code
A few different checkbox styles.
Updated on June 12, 2015
More info: Link
Dependency: jquery.min.js
26 of 53Accessible Custom Checkboxes with CSS only
27 of 53CSS-only Todo List Checkbox Animation
28 of 53Neuomorphic CSS Checkboxes
29 of 53Task Progress Meter
30 of 53Jelly Checkbox
31 of 53Advanced Checkbox Hack
About the Code
This works for both iOS and Android! You can use almost the default checkbox-hack syntax and just need to add two things:
1. Android smaller than / equal 4.1.2
pseudo-class + general/adjacent sibling doesn’t work on Android 4.1.2 so we need a hack:
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
2. iOS smaller than 6.0
Due to a bug on iOS, it’s not possible to click the label to toggle the input (checkbox), so we add an empty onclick to the label:
<label for="button" onclick>click / touch</label>Updated on November 13, 2012
More info: Link
Dependency: –
32 of 53Wobble Checkboxes
33 of 53Checkbox Trickery: Simple Toggle
34 of 53Pure CSS3 Star Wars Lightsaber Checkboxes
35 of 53chippy CSS checkbox inputs
36 of 53Style Checkboxes – using CSS custom properties
37 of 53Checkbox switcher
38 of 53CSS Checkbox
39 of 53CSS Checkbox mark Animation
40 of 53#CodePenChallenge – CSS Checkbox
41 of 53Checklist animation – Only CSS
42 of 53simple checkbox switcher
43 of 53Pure CSS Animated Checkbox
44 of 53Checkbox SVG Path Animation
45 of 53CSS Checkbox Inspiration
46 of 53checkbox with mo.js
47 of 53Material UI style animated CSS checkboxes
48 of 53Happy New Year
About the Code
Firework from this awesome Pen.
Updated on December 31, 2020
More info: Link
Dependency: gsap.min.js, MorphSVGPlugin3.min.js, EasePack.min.js
49 of 53Checkboxes
50 of 53Animated SVG Checkbox – Grenade
51 of 53Animated SVG Checkbox – Spin
52 of 53Emoji Pick Two
About the Code
A tongue-in-cheek checklist to give to your next client.
Uses sass, emoji, vanilla JS (tried Vue at first, but it turned out to be less complicated to just handle everything in vanilla JS than to implement the proper watchers), and a sprinkling of variable font transformation.
Updated on March 19, 2021
More info: Link
Dependency: –
53 of 53To-Do Terrarium
About the Code
Not just a to-do list, it’s a covid quarantine to-do list.
More info: Link
Dependency: simple-line-icons.min.css, jquery.min.js, gsap.min.js, EasePack3.min.js, DrawSVGPlugin3.min.js
Discussion about this post