50+ Free CSS Checkbox Examples to Make Your Site More Interactive

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

Author

  • Valery
  • June 20, 2015

Made with

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

Author

  • Jon Kantner
  • September 4, 2018

Made with

  • HTML / SCSS / JS

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

Author

  • Amit Sheen
  • October 5, 2021

Made with

  • HTML / SCSS

About the Code

More info: Link

Dependency:


Custom CSS Checkboxes and radio buttons with background image

Author

  • Michelle Barker
  • September 14, 2021

Made with

  • HTML / SCSS

About the Code

More info: Link

Dependency:


Custom Checkbox group styled as tiles

Author

  • HÃ¥vard Brynjulfsen
  • April 10, 2021

Made with

  • HTML / SCSS

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

Author

  • Jon Kantner
  • December 3, 2020

Made with

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

Author

  • Mahmoud Elmahdi
  • May 31, 2019

Made with

  • Pug / SCSS

About the Code

More info: Link

Dependency:


Interactive Soft Drink Lid

Author

  • Jon Kantner
  • August 7, 2020

Made with

  • HTML / CSS / JS

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

Author

  • Wallace Erick
  • July 14, 2013

Made with

  • HTML / SCSS / JS

About the Code

With pure CSS.

Updated on September 23, 2020

More info: Link

Dependency: jquery.min.js


Custom Checkbox

Author

  • mattdrose
  • May 27, 2014

Made with

  • HTML / SCSS

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

Author

  • André Cortellini
  • September 4, 2014

Made with

  • HTML / CSS

About the Code

Very easy custom CSS checkbox. Only using HTML & CSS.

More info: Link

Dependency:


Custom checkbox with SVG marker

Author

  • Tommy Rolchau Mathiesen
  • October 23, 2014

Made with

  • HTML / SCSS

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

Author

  • Rian Ariona1
  • June 5, 2014

Made with

  • HTML / SCSS / jQuery

About the Code

Updated on July 25, 2014

More info: Link

Dependency: font-awesome.min.css, jquery.min.js


Cool Custom Checkbox with SVG!

Author

  • Luis Adame
  • February 18, 2018

Made with

  • Pug / SCSS

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

Author

  • Kenan Yusuf
  • January 13, 2016

Made with

  • HTML / Stylus

About the Code

Updated on January 18, 2017

More info: Link

Dependency:


CUSTOM ANIMATED CHECKBOXES

Author

  • Sara Soueidan
  • March 22, 2015

Made with

  • HTML / CSS

About the Code

Updated on February 27, 2021

More info: Link

Dependency:


CSS-Only Custom Animated Checkbox

Author

  • Gabrielle Wee
  • February 21, 2017

Made with

  • Haml / SCSS

About the Code

Check out the :checked animation.

Updated on February 25, 2017

More info: Link

Dependency:


Simple Glyphicon Favorite Button

Author

  • Ian Emsens
  • June 20, 2016

Made with

  • HTML / CSS

About the Code

Stripe.com Style Dropdown Menu developed using Pug, SCSS and JavaScript.

More info: Link

Dependency:


Custom CSS Checkbox

Author

  • Alison Tague
  • January 10, 2016

Made with

  • HTML / CSS

About the Code

More info: Link

Dependency:


#CodePenChallenge | Pure CSS Checkboxes

Author

  • Stas Melnikov
  • July 18, 2018

Made with

  • HTML / CSS

About the Code

Updated on September 20, 2020

More info: Link

Dependency:


Custom checkbox using CSS3

Author

  • ihzh
  • November 24, 2015

Made with

  • HTML / SCSS

About the Code

Updated on November 28, 2015

More info: Link

Dependency:


Custom CSS Checkbox animation – #16

Author

  • javiluli
  • October 17, 2019

Made with

  • Pug / SCSS

About the Code

Updated on March 16, 2021

More info: Link

Dependency:


Pure CSS Checkbox Toggle Buttons | ON-OFF Switches

Author

  • Himalaya Singh
  • October 2, 2018

Made with

  • HTML / CSS

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

Author

  • Justin Windle
  • February 8, 2013

Made with

  • HTML / Sass

About the Code

Simulating squishy rubber (elastomer) buttons.

Updated on April 1, 2013

More info: Link

Dependency:


CSS Checkbox Styles

Author

  • Brad Bodine
  • December 20, 2012

Made with

  • HTML / SCSS / JS

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

Author

  • Geoffrey Crofte
  • May 23, 2013

Made with

  • HTML / SCSS / JS

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

Author

  • Shaw
  • November 20, 2017

Made with

  • HTML / Less / JS

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

Author

  • Braydon Coyer
  • January 28, 2020

Made with

  • HTML / SCSS

About the Code

Updated on March 4, 2020

More info: Link

Dependency:


Task Progress Meter

Author

  • Clint Brown
  • August 4, 2013

Made with

  • HTML / SCSS / JS

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

Author

  • Andreas Storm
  • February 8, 2017

Made with

  • Slim / Stylus

About the Code

Updated on February 13, 2017

More info: Link

Dependency: bootstrap.min.css


Advanced Checkbox Hack

Author

  • Tim Pietrusky
  • November 10, 2012

Made with

  • HTML / SCSS / JS

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

Author

  • Tamino Martinius
  • May 12, 2018

Made with

  • HTML / CSS / JS

About the Code

Updated on September 16, 2020

More info: Link

Dependency:


Checkbox Trickery: Simple Toggle

Author

  • Will Boyd
  • June 15, 2015

Made with

  • HTML / CSS

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

Author

  • Nicholas Cerminara
  • May 19, 2013

Made with

  • HTML / CSS

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

Author

  • Adam Quinlan
  • October 18, 2018

Made with

  • HTML / CSS

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

Author

  • Katheer Mizal
  • June 21, 2017

Made with

  • HTML / SCSS

About the Code

Updated on June 22, 2017

More info: Link

Dependency:


Checkbox switcher

Author

  • Oleg Frolov
  • March 31, 2019

Made with

  • Pug / Stylus / JS

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

Author

  • Mohammadreza Ziadzadeh
  • June 15, 2019

Made with

  • HTML / SCSS

About the Code

Simple checkbox with animation.

Updated on October 8, 2021

More info: Link

Dependency:


CSS Checkbox mark Animation

Author

  • Danian
  • June 15, 2017

Made with

  • HTML / Less

About the Code

code is pretty dirty, use at your own risk.

Updated on April 10, 2018

More info: Link

Dependency:


#CodePenChallenge – CSS Checkbox

Author

  • Andreas Storm
  • April 18, 2018

Made with

  • Pug / Sass

About the Code

Updated on July 18, 2018

More info: Link

Dependency: bootstrap.css


Checklist animation – Only CSS

Author

  • Milan Raring
  • March 5, 2020

Made with

  • HTML / SCSS

About the Code

Simple checklist animation.

Updated on April 6, 2020

More info: Link

Dependency:


simple checkbox switcher

Author

  • Artyom
  • February 10, 2017

Made with

  • HTML / CSS / jQuery

About the Code

Checkboxes + labels + little jquery.

Updated on April 5, 2017

More info: Link

Dependency:


Pure CSS Animated Checkbox

Author

  • PaweÅ‚ Durczok
  • December 13, 2016

Made with

  • HTML / SCSS

About the Code

A pure HTML/CSS animated checkbox.

Updated on January 9, 2017

More info: Link

Dependency:


Checkbox SVG Path Animation

Author

  • Andreas Storm
  • June 7, 2017

Made with

  • HTML / Sass

About the Code

Updated on June 12, 2017

More info: Link

Dependency:


CSS Checkbox Inspiration

Author

  • Irko Palenius
  • February 15, 2016

Made with

  • HTML / CSS

About the Code

Updated on December 22, 2016

More info: Link

Dependency:


checkbox with mo.js

Author

  • Mike Quinn
  • May 5, 2017

Made with

  • HTML / SCSS / 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

Author

  • Adam Bottega
  • November 5, 2015

Made with

  • HTML / SCSS

About the Code

Updated on February 28, 2016

More info: Link

Dependency:


Happy New Year

Author

  • Aaron Iker
  • December 29, 2020

Made with

  • HTML / SCSS / JS

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

Author

  • Aaron Iker
  • December 9, 2019

Made with

  • HTML / SCSS

About the Code

Updated on December 10, 2019

More info: Link

Dependency:


Animated SVG Checkbox – Grenade

Author

  • P
  • January 23, 2021

Made with

  • HTML / SCSS / JS

About the Code

Updated on January 27, 2021

More info: Link

Dependency:


Animated SVG Checkbox – Spin

Author

  • P
  • January 21, 2021

Made with

  • HTML / SCSS / JS

About the Code

Updated on January 26, 2021

More info: Link

Dependency:


Emoji Pick Two

Author

  • Josh Collinsworth
  • March 31, 2020

Made with

  • HTML / SCSS / JS

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

Author

  • Olivia Ng
  • March 27, 2020

Made with

  • HTML / SCSS / jQuery

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


W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *