84 Checkboxes CSS

326 阅读10分钟
原文链接: freefrontend.com

84 Checkboxes CSS

84 free HTML and CSS custom checkbox examples: with image, with label, checked, etc. Update of May 2018 collection. 10 new items.

Related Articles

  1. CSS Toggle Switches
  2. CSS Radio Buttons

Author

  • Andreas Storm

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Lock Checkbox

Lock - pure CSS micro interaction made with HTML checkbox and SVG.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andreas Storm

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Flip Checkbox

Flip checkbox in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • @mandycodestoo

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Checkbox

Pure CSS animated checkbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Quinlan

Made with

  • HTML / CSS

About the code

Chippy Checkbox Inputs

I had occasion to create a field of checkboxes recently for a form and thought I would try to have a little fun with the styling.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Toggle Checkbox Animation

Toggle check button. Sweet animation, smooth and right speed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Pencil and Paper Checkboxes

A checkbox concept that simulates filling checkboxes and erasing checks in real life.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jase

Made with

  • HTML / CSS

About the code

Fancy Checkboxes and Radio Buttons

It's been decades — checkboxes and radio buttons still look terrible and don't play well without some love. Starting with well-formed HTML, look what we can do with a bit of style and some Font Awesome glyphs...

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Simon Goellner

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Cardboard Check Box

A checkbox made to look like a cardboard box, opens up on check to reveal a tick using 3D CSS transforms.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About the code

Pure CSS Checkboxes

I've used nested span elements for creating an animation of square turn and creating an arrow animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jouan Marcel

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Emojibox - Checkbox with Emojis

Checkbox with emojis (without JS). Create more expressive checkboxes with emojis. They combine the simplicity of checkboxes for the user with the expressiveness of emojis. It makes use of checkbox and radio button to create a binary or non-binary selection. Animations are done with CSS transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: CSS Toggle

Author

  • Andreas Storm

Made with

  • HTML
  • CSS/Sass

About the code

CSS Toggle

Material design CSS toggle.

Demo image: CSS Design Checkbox

Author

  • Andreas Storm

Made with

  • HTML
  • CSS/Stylus

About the code

CSS Design Checkbox

CSS material design checkbox.

Demo image: Checkbox

Author

  • Andreas Storm

Made with

  • HTML
  • CSS/Sass

About the code

Checkbox

CSS checkbox.

Demo image: Pure CSS Skateboard Checkbox

Author

  • Adam Kuhn

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Pure CSS Skateboard Checkbox

Built with pure css and a bit of patience.

Demo image: Toggles

Author

  • Adam Kuhn

Made with

  • HTML
  • CSS/SCSS

About the code

Toggles

Useful toggle.

Demo image: Toggle

Author

  • David Darnes

Made with

  • HTML
  • CSS

About the code

Toggle

Nice smooth movement and the added detail with the animated turn on the head. Based on "Toggle" by Daryl Ginn.

Demo image: Toggle

Author

  • Katherine Kato

Made with

  • HTML
  • CSS/SCSS

About the code

Toggle

Pure CSS toggle switch.

Demo image: Cool Checkbox With SVG

Author

  • Luis Adame

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

Cool Checkbox With SVG

A custom checkbox that makes use of SVG to animate the tick inside of it.

Demo image: CSS Toggle Switch

Author

  • Ana Tudor

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Toggle Switch

CSS soft toggle switch.

Demo image: Emoji Checkbox

Author

  • Brett Commandeur

Made with

  • HTML
  • CSS

About the code

Emoji Checkbox

Pure CSS emoji checkbox.

Demo image: Material Inspired Checkboxes

Author

  • Buddy Reno

Made with

  • HTML
  • CSS/SCSS

About the code

Material Inspired Checkboxes

The trick to this is placing the label after the checkbox. That way you can use the :checked state to toggle the different pseudo elements on the label. No javascript necessary. To make the background animation work, you'll need a tiny bit of magic. The label:before element is a small 10x10 circle. We animate the scale of it instead of the size so that we can keep the proportion of the circle and make it look like it "fills out" the bar. The max width of the form is set to 550px. The :before element animates by using scale3d (for hardware acceleration) by 56 times. 56 * 10 === 560. This allows the circle to fill out the bar by going slightly outside the bounds of the input group container.

Demo Image: Check Boxes

Author

  • Leonard Meagher
  • 28.08.2017

Made with

  • HTML
  • CSS/SCSS

About the code

Check Boxes

Pure CSS checkboxes.

Demo Image: Custom Checkbox/Toggle Switch

Author

  • thelaazyguy
  • 26.08.2017

Made with

  • HTML
  • CSS

About the code

Custom Checkbox/Toggle Switch

Collection of four toggle switches made with HTML and CSS without a single line of JavaScript. Two of the switches are made with the help of SVG also.

Demo Image: Radio and Checkbox Styles

Author

  • Matthew Shields
  • 25.06.2017

Made with

  • HTML
  • CSS/SCSS

About the code

Radio and Checkbox Styles

Simple shape styles for radio and checkbox buttons.

Demo Image: Style Checkboxes

Author

  • Katheer Mizal
  • 21.06.2017

Made with

  • HTML
  • CSS/SCSS

About the code

Style Checkboxes

Style Checkboxes - using CSS custom properties.

Demo Image: 3D Switcher Vll Plus

Author

  • Rplus
  • 18.06.2017

Made with

  • HTML/Pug
  • CSS/SCSS

About the code

3D Switcher Vll Plus

Use CSS variables to control states.

Demo Image: Checkmark Animation

Author

  • Danian
  • 15.06.2017

Made with

  • HTML
  • CSS/LESS

About the code

Checkmark Animation

Pure CSS checkbox animation.

Demo Image: Checkbox SVG Path Animation

Author

  • Andreas Storm
  • 12.06.2017

Made with

  • HTML
  • CSS/Sass
  • SVG

About the code

Checkbox SVG Path Animation

HTML and CSS checkbox with SVG path animation.

Demo Image: Pure CSS Toggle Slider

Author

  • Ian Egner
  • 31.05.2017

Made with

  • HTML/Pug
  • CSS/SCSS
  • SVG

About the code

Pure CSS Toggle Slider

Pure CSS Toggle slider/checkbox with SVG tick and cross.

Demo Image: Realistic Switch
Demo Image: Realistic Switch

Realistic Switch

Realistic CSS switch (checkbox).
Made by Nathan Taylor
February 19, 2017

Demo Image: Simple Checkbox Switcher
Demo Image: Simple Checkbox Switcher

Simple Checkbox Switcher

Checkboxes with labels and little jQuery.
Made by Artyom
February 10, 2017

Demo Image: Happy Little Checkboxes
Demo Image: Happy Little Checkboxes

Happy Little Checkboxes

Happy little jello checkboxes :) Feel free to use this code in your projects.
Made by Branko Stancevic
February 10, 2017

Demo Image: Jelly Checkbox
Demo Image: Jelly Checkbox

Jelly Checkbox

Jelly checkbox with HTML and CSS.
Made by Andreas Storm
February 8, 2017

Demo Image: Full CSS Checkbox
Demo Image: Full CSS Checkbox

Full CSS Checkbox

A full css checkbox button. You’ll find: - SVG Background -css transition - pseudo element - no JS.
Made by Timothee Guignard
February 5, 2017

Demo Image: Switchy Checkbox
Demo Image: Switchy Checkbox

Switchy Checkbox

HTML, CSS and JavaScript switchy checkbox.
Made by tiff
January 19, 2017

Demo Image: Custom Checkboxes, Radio Buttons And Select Boxes
Demo Image: Custom Checkboxes, Radio Buttons And Select Boxes

Custom Checkboxes, Radio Buttons And Select Boxes

Completely CSS: custom checkboxes, radio buttons and select boxes.
Made by Kenan Yusuf
January 18, 2017

Demo Image: All-CSS Toggle Switch
Demo Image: All-CSS Toggle Switch

All-CSS Toggle Switch

All-CSS toggle switch (checkbox hack).
Made by Marcus Burnette
January 12, 2017

Demo Image: Pure CSS Animated Checkbox
Demo Image: Pure CSS Animated Checkbox

Pure CSS Animated Checkbox

A pure html/css animated checkbox created for the audience of North of Rapture blog.
Made by Paweł Durczok
January 9, 2017

Demo Image: Simple Checkbox
Demo Image: Simple Checkbox

Simple Checkbox

Simple checkbox with CSS transition for it’s states.
Made by Rafael Abensur
November 2, 2016

Demo Image: Realistics Checkboxes
Demo Image: Realistics Checkboxes

Realistics Checkboxes

Realistics checkboxes with only CSS.
Made by Twikito
October 19, 2016

Demo Image: Elegantly Simple Checkbox
Demo Image: Elegantly Simple Checkbox

Elegantly Simple Checkbox

Elegantly simple checkbox with HTML and CSS.
Made by Bogdan
August 19, 2016

Demo Image: Google Material Style Checkbox (CSS Only)
Demo Image: Google Material Style Checkbox (CSS Only)

Google Material Style Checkbox (CSS Only)

Checkboxes based upon the material design implementation of the polymer checkboxes. They don’t fully replicate these but are just an exercise to imitate them with just css. These only work in chrome :)
Made by Sam
August 12, 2016

Demo Image: Custom CSS Checkbox
Demo Image: Custom CSS Checkbox

Custom CSS Checkbox

Custom HTML and CSS checkbox.
Made by Derek Morash
August 7, 2016

Demo Image: Pure CSS Checkboxes
Demo Image: Pure CSS Checkboxes

Pure CSS Checkboxes

Pure HTML and CSS toggle buttons.
Made by Mauricio Allende
June 17, 2016

Demo Image: SVG Checkbox
Demo Image: SVG Checkbox

SVG Checkbox

Checkbox used for SitePoint article on styling form controls with Sass.
Made by GRAY GHOST
June 10, 2016

Demo Image: Custom Checkbox
Demo Image: Custom Checkbox

Custom Checkbox

Custom checkboxes that would work well with an icon font. Modern browser support with IE6+ fallback.
Made by mattdrose
May 31, 2016

Demo Image: Jquery Toggle Button
Demo Image: Jquery Toggle Button

Jquery Toggle Button

iOS style toggle switch button using jQuery and CSS.
Made by Nikhil Krishnan
May 4, 2016

Demo Image: Fluid Checkboxes
Demo Image: Fluid Checkboxes

Fluid Checkboxes

Was wondering if the animation was possible with pure CSS/HTML checkboxes.
Made by Bjorn
April 18, 2016

Demo Image: Simple Checkbox
Demo Image: Simple Checkbox

Simple Checkbox

Just a simple HTML and CSS checkbox.
Made by Pamela Dayne
April 15, 2016

Demo Image: Morphing CSS Checkbox
Demo Image: Morphing CSS Checkbox

Morphing CSS Checkbox

HTML & CSS morphing checkbox.
Made by Sjoerd de Roij
April 5, 2016

Demo Image: Switch In HTML, CSS And JavaScript
Demo Image: Switch In HTML, CSS And JavaScript

Switch In HTML, CSS And JavaScript

Brightness and gamma switch.
Made by Joseph Shenton
April 5, 2016

Demo Image: Another Toggle
Demo Image: Another Toggle

Another Toggle

Toggle with HTML and CSS.
Made by MacKenzie Bobbitt
February 19, 2016

Demo Image: Custom Checkbox
Demo Image: Custom Checkbox

Custom Checkbox

Custom checkbox with SVG marker.
Made by Tommy Rolchau Mathiesen
February 5, 2016

Demo Image: Flat UI Checkbox
Demo Image: Flat UI Checkbox

Flat UI Checkbox

Flat UI checkbox with HTML and CSS.
Made by Arsen Zbidniakov
January 19, 2016

Demo Image: Checkbox/Radio/Toggle Switches
Demo Image: Checkbox/Radio/Toggle Switches

Checkbox/Radio/Toggle Switches

Variable based inputs - checkbox/radio/toggle switches.
Made by
January 9, 2016

Demo Image: Motion Checkbox
Demo Image: Motion Checkbox

Motion Checkbox

A motion checkbox remake of Mark Lamb’s dribble shot before bedtime!
Made by Jonas Badalic
November 4, 2015

Demo Image: Checkbox Animation - CSS
Demo Image: Checkbox Animation - CSS

Checkbox Animation - CSS

Only CSS animation not checked.
Made by Hoonseok Park
November 3, 2015

Demo Image: Switch Button
Demo Image: Switch Button

Switch Button

A pretty switch button.
Made by Kyosuke
November 3, 2015

Demo Image: SVG Checkbox Animation
Demo Image: SVG Checkbox Animation

SVG Checkbox Animation

SVG Remake of Nick Buturishvili’s “Switch” dribbble shot.
Made by Jonas Badalic
October 8, 2015

Demo Image: Gooey Toggle Switch
Demo Image: Gooey Toggle Switch

Gooey Toggle Switch

Gooey checkbox CSS only.
Made by Vincent Durand
September 14, 2015

Demo Image: Pure CSS Toggles
Demo Image: Pure CSS Toggles

Pure CSS Toggles

Getting fun with some animations & transitions :)
Made by Rafael González
July 22, 2015

Demo Image: Custom Checkbox
Demo Image: Custom Checkbox

Custom Checkbox

Empty box transforms into check. No additional markup, just input, label for it and some CSS.
Made by Valery
June 20, 2015

Demo Image: Checkbox Trickery: Simple Toggle
Demo Image: Checkbox Trickery: Simple Toggle

Checkbox Trickery: Simple Toggle

Basic formula for controlling the look and feel of a checkbox. No JavaScript.
Made by Will Boyd
June 16, 2015

Demo Image: Checkbox Style 2.0
Demo Image: Checkbox Style 2.0

Checkbox Style 2.0

Checkbox style in HTML and CSS.
Made by Lorenzo D’Ianni
June 4, 2015

Demo Image: Checkbox Button Toggle
Demo Image: Checkbox Button Toggle

Checkbox Button Toggle

Responsive checkbox set by font size, easily set the inner text for on and off states.
Made by Darren
May 12, 2015

Demo Image: Delightful Checkbox Animation
Demo Image: Delightful Checkbox Animation

Delightful Checkbox Animation

Neat little checkboxes with pleasing SVG-less animation.
Made by Dylan Raga
February 1, 2015

Demo Image:    Styling Checkboxes And Radio Buttons With CSS
Demo Image: Styling Checkboxes And Radio Buttons With CSS

Styling Checkboxes And Radio Buttons With CSS

This pen shows how to style checkboxes and radio buttons with plain CSS.
Made by 8bit code
December 28, 2014

Demo Image: Animated Checkboxes
Demo Image: Animated Checkboxes

Animated Checkboxes

Just some simple animated toggle elements.
Made by Jarad Light
November 23, 2014

Demo Image: Simple Styled Checkbox
Demo Image: Simple Styled Checkbox

Simple Styled Checkbox

Simple styled checkbox with HTML and CSS.
Made by Juan Cabrera
October 27, 2014

Demo Image: Custom Checkbox
Demo Image: Custom Checkbox

Custom Checkbox

Very easy custom checkbox. Only using HTML & CSS.
Made by André Cortellini
September 4, 2014

Demo Image: Animated CSS3 Checkbox
Demo Image: Animated CSS3 Checkbox

Animated CSS3 Checkbox

CSS3 animated (except IE9) checkbox that can be used as a class on a label for a checkbox (to manipulate the value of the checkbox) or can be used as a class on a standalone element, and toggled by adding a class via javascript.
Made by Jimmy Gillam
June 10, 2014

Demo Image: Checkbox
Demo Image: Checkbox

Checkbox

Checkbox full CSS with transition.
Made by Kévin Chassagne
June 5, 2014

Demo Image: Checkbox With SVG
Demo Image: Checkbox With SVG

Checkbox With SVG

Checkbox with HTML, CSS and SVG.
Made by feng liang
May 13, 2014

Demo Image: Using Pseudo Elements for Input Styling
Demo Image: Using Pseudo Elements for Input Styling

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.
Made by Alex Bergin
April 19, 2014

Demo Image: Semantic Checkboxes
Demo Image: Semantic Checkboxes

Semantic Checkboxes

Semantic CSS animated checkboxes.
Made by Demetri Ganoff
March 30, 2014

Demo Image: CSS-Only Animated Checkbox
Demo Image: CSS-Only Animated Checkbox

CSS-Only Animated Checkbox

Another animated checkbox.
Made by Tim Severien
February 6, 2014

Demo Image: Custom CSS Checkbox
Demo Image: Custom CSS Checkbox

Custom CSS Checkbox

Checkbox with pure CSS.
Made by Wallace Erick
October 8, 2013

Demo Image: Stylish Checkbox
Demo Image: Stylish Checkbox

Stylish Checkbox

CSS only checkbox.
Made by Stefan Judis
September 22, 2013

Demo Image: Flat Toggle Switch
Demo Image: Flat Toggle Switch

Flat Toggle Switch

Remake of the Dribbble shot Flat Toggle Switch by Joshua Andrew Davies.
Made by Felix De Montis
September 6, 2013

Demo Image: Day & Night Checkbox
Demo Image: Day & Night Checkbox

Day & Night Checkbox

Day & Night Checkbox with HTML, CSS and JavaScript.
Made by Lionel T
July 6, 2013

Demo Image: Checkbox CSS
Demo Image: Checkbox CSS

Checkbox CSS

Custom checkbox with style …
Made by pixelslip
June 12, 2013

Demo Image: Survys Rebound Checkbox
Demo Image: Survys Rebound Checkbox

Survys Rebound Checkbox

Absolutely CSS checkbox.
Made by Lionel T
June 9, 2013

Demo Image: Animated Ubuntu Touch-Styled Checkboxes
Demo Image: Animated Ubuntu Touch-Styled Checkboxes

Animated Ubuntu Touch-Styled Checkboxes

Animated Ubuntu touch-styled checkboxes with HTML and CSS.
Made by Eduard Mayer
May 26, 2013

Demo Image: Clean CSS Checkbox
Demo Image: Clean CSS Checkbox

Clean CSS Checkbox

Clean HTML and CSS checkbox.
Made by Jeff Powers
August 25, 2012