74 free HTML and CSS custom checkbox examples: with image, with label, checked, etc

Browse 74 free HTML and CSS custom checkbox code examples, including designs with images, labels, checked states, and more, to enhance your website’s forms.

Cute Skeuomorphic Checkboxes

Author:
LukyVJ | February 24, 2023
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

radio/checkbox

Author:
Brady Hullopeter | November 11, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

FlipBoxes

Author:
Amit Sheen | October 5, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Accent-color

Accent-color

Author:
Michelle Barker | September 7, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Checkbox ft. border-radius

Author:
Preethi Sam | August 22, 2021
Made with:
HTML / CSS

About a code

A fun checkbox design with just border radius.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Checkbox-Counter

Author:
Nils Binder | July 15, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Custom, Accessible Checkbox

Author:
Nacho Toledo | April 17, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Checkbox Group Styled as Tiles

Author:
Håvard Brynjulfsen | April 10, 2021
Made with:
HTML / CSS (SCSS)

About a code

A demonstration of how to create checkboxes that doesn't necessarily looks like... well, checkboxes.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Animation Features Update Dashboard Page

Author:
FlorinCornea | March 16, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Checkbox Card

Author:
Sławek Jaskulski | October 9, 2020
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Accessible Custom Toggle Switch

Author:
Homer Gaines | September 10, 2020
Made with:
HTML / CSS (SCSS)

About a code

This example shows how to markup and style a semantic checkbox to look and behave like a toggle switch.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Pure CSS Custom Checkbox Style

Author:
Stephanie Eckles | July 26, 2020
Made with:
HTML / CSS (SCSS)

About a code

Cross-browser custom checkboxes styled using only CSS and SVG.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Check

Author:
Aaron Iker | June 30, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

ON-OFF

Author:
Sikriti Dakua | May 22, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Pure CSS: Custom Accessible Checkboxes

Author:
Ahmad Nasr | May 16, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Bounce Checkbox

Author:
alphardex | March 20, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Checklist Animation - Only CSS

Author:
Milan Raring | March 5, 2020
Made with:
HTML / CSS (SCSS)

About a code

Simple checklist animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Todo Checkbox

Author:
Katherine Kato | February 17, 2020
Made with:
HTML / CSS (SCSS)

About a code

Todo checkbox with a text fill hover and strikethrough effect when checked.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

+/- Toggle

Author:
Aaron Iker | January 31, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Gooey Checkbox

Author:
Andreas Storm | January 29, 2020
Made with:
HTML (Pug) / CSS (Stylus)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neuomorphic Checkboxes

Author:
Braydon Coyer | January 28, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

2020 Toggles

Author:
Aaron Iker | January 11, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Neumorphic Design

Author:
Chris Weissenberger | December 23, 2019
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Checkboxes

Author:
Aaron Iker | December 9, 2019
Made with:
HTML / CSS (SCSS)

About a code

Micro-interaction is a couple variations on a classic checkbox.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Checkmark

Author:
Andreas Storm | October 3, 2019
Made with:
HTML (Pug) / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨