Collection free hand-picked 23 CSS Checkboxes. Live demos and downloads are available on each demo.
About the Code
CSS CheckBox
Dependency:–
Animation:yes
About the Code
CSS Checkbox
Dependency:–
Animation:yes
About the Code
Awesome Pure CSS Checkbox
Awesome Pure CSS Checkbox.
Dependency:–
Animation:yes
About the Code
Material Checkbox
Animation:yes
About the Code
CSS checkbox – Material icons
Dependency:–
About the Code
Pure CSS Checkbox
Dependency:–
Animation:no
About the Code
Absolutely css checkbox
Dependency:–
Animation:no
About the Code
Animated Pure CSS Checkbox
Dependency:–
Animation:yes
About the Code
Pure Custom CSS Checkbox
Pure custom CSS checkbox.
Dependency:–
Animation:yes
About the Code
CSS Checkbox
Semantic HTML structure (input tag and label text inside a label tag) of custom-styled checkbox. Firefox doesn’t apply styles.
Dependency:–
Animation:no
Compatible Browsers:Chrome & Safari
About the Code
Pure css Bootstrap checkbox
Hide the pure CSS checkbox and use a pseudo-element to make a fake checkbox.
Animation:no
About the Code
CSS Checkbox with animation
Dependency:–
Animation:yes
About the Code
Animated CSS Checkbox
Animates checkbox from X to checkmark.
Dependency:–
Animation:yes
About the Code
Accessible Custom Checkboxes with CSS only
Animated custom checkboxes using graceful degradation.
Dependency:–
Animation:yes
About the Code
CSS only Checkbox animation
Simple checklist animation made with HTML checkbox and CSS.
Dependency:–
Animation:yes
About the Code
Emoji Checkbox
Uses SCSS, 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.
Dependency:–
Animation:yes
About the Code
Interactive Custom Checkbox
A realistic interactive custom checkbox made with CSS.
Dependency:–
Animation:yes
About the Code
Animated Fill and Strikethrough Checkboxes
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.
Dependency:–
Animation:yes
About the Code
Checkbox group styled
Checkbox group styled as tiles.
Dependency:–
Animation:yes
About the Code
Checkbox-Counter
Dependency:–
Animation:yes
About the Code
Animated FlipBoxes
Dependency:–
Animation:yes
About the Code
Styling native checkboxes using pseudo-elements
Native checkboxes were created using <input type=checkbox> don’t offer an intuitive way of styling, but this demo useses appearance: none to hide the default checkbox and use pseudo-elements to display our custom styles.
In this example, mask-image styling is used to display an inline svg using ::after. I also make use of browser colors wherever possible to provide support for the built-in light and dark themes.
Dependency:–
Animation:no
About the Code
Checkbox Accent Color Pixel Art
Dependency:–
Animation:yes
