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.
Custom CSS checkbox
About the Code
The empty box transforms into a check. No additional markup, just input, label for it, and some CSS
More info: Link
Dependency: –
Pencil 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
FlipBoxes
Custom CSS Checkboxes and radio buttons with background image
Custom Checkbox group styled as tiles
About the Code
A demonstration of how to create CSS checkboxes that don’t necessarily look like… well, checkboxes.
Updated on July 5, 2021
More info: Link
Dependency: –
Animated 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: –
Stylish Input
Interactive 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:wght@400;700, Inconsolata)
Custom CSS Checkbox
Custom Checkbox
About the Code
Custom CSS checkboxes that would work well with an icon font. Modern browser support with IE6+ fallback.
Updated on May 31, 2016
More info: Link
Dependency: –
Custom Checkbox
Custom 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: –
Responsive Custom checkbox
About the Code
Updated on July 25, 2014
More info: Link
Dependency: font-awesome.min.css, jquery.min.js
Cool Custom Checkbox with SVG!
About the Code
A custom CSS checkbox that makes use of SVG to animate the tick inside of it.
Updated on May 21, 2018
More info: Link
Dependency: –
Completely CSS: Custom checkboxes, radio buttons, and select boxes
CUSTOM ANIMATED CHECKBOXES
CSS-Only Custom Animated Checkbox
About the Code
Check out the :checked animation.
Updated on February 25, 2017
More info: Link
Dependency: –
Simple Glyphicon Favorite Button
About the Code
Stripe.com Style Dropdown Menu developed using Pug, SCSS and JavaScript.
More info: Link
Dependency: –
Custom CSS Checkbox
#CodePenChallenge | Pure CSS Checkboxes
Custom checkbox using CSS3
Custom CSS Checkbox animation – #16
Pure CSS Checkbox Toggle Buttons | ON-OFF Switches
About the Code
Collection of toggle buttons / on-off switches which can be practically used in a website. Designed using CSS without any JavaScript 🙂
Updated on November 20, 2020
More info: Link
Dependency: –
Squishy Toggle Buttons
About the Code
Simulating squishy rubber (elastomer) buttons.
Updated on April 1, 2013
More info: Link
Dependency: –
CSS Checkbox Styles
About the Code
A few different checkbox styles.
Updated on June 12, 2015
More info: Link
Dependency: jquery.min.js
Accessible Custom Checkboxes with CSS only
About the Code
Animated custom checkboxes using graceful degradation (display classical checkboxes on old browsers).
Updated on January 8, 2021
More info: Link
Dependency: –
CSS-only Todo List Checkbox Animation
About the Code
Original built with JS but adapted to be CSS-only since JS wasn’t necessary.
More info: Link
Dependency: –
Neuomorphic CSS Checkboxes
Task Progress Meter
About the Code
Click the current task checkbox to progress. Shout-out to Kurt Hanson’s Progress Bar (Pie) for the code behind the circular progress highlighting.
More info: Link
Dependency: –
Jelly Checkbox
Advanced 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: –
Wobble Checkboxes
Checkbox Trickery: Simple Toggle
About the Code
The basic formula for controlling the look and feel of a checkbox. No JavaScript.
More info: Link
Dependency: –
Pure CSS3 Star Wars Lightsaber Checkboxes
About the Code
A simple and fun demo of CSS checkboxes that have a cool Star Wars Light Saber animation. Not really UI practical, but overall a cool demonstration.
Updated on July 16, 2013
More info: Link
Dependency: –
chippy CSS checkbox inputs
About the Code
I had the occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.
Updated on October 20, 2018
More info: Link
Dependency: –
Style Checkboxes – using CSS custom properties
Checkbox switcher
About the Code
Are you struggling to choose between a checkbox and a switch? Are you not sure what’s best for the case? No stress anymore. Choose the Checkboxswitcher!
Updated on April 1, 2019
More info: Link
Dependency: –
CSS Checkbox
CSS Checkbox mark Animation
About the Code
code is pretty dirty, use at your own risk.
Updated on April 10, 2018
More info: Link
Dependency: –
#CodePenChallenge – CSS Checkbox
Checklist animation – Only CSS
simple checkbox switcher
About the Code
Checkboxes + labels + little jquery.
Updated on April 5, 2017
More info: Link
Dependency: –
Pure CSS Animated Checkbox
About the Code
A pure HTML/CSS animated checkbox.
Updated on January 9, 2017
More info: Link
Dependency: –
Checkbox SVG Path Animation
CSS Checkbox Inspiration
checkbox with mo.js
About the Code
Simple checkbox w mo.js animation.
Updated on March 13, 2018
More info: Link
Dependency: mo.min.js
Material UI style animated CSS checkboxes
Happy 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
Checkboxes
Animated SVG Checkbox – Grenade
Animated SVG Checkbox – Spin
Emoji 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: –
To-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
Leave a Reply