This is an up-to-date list of the 10 best PURE CSS libraries that can be used to beautify and enhance the native, ugly, hard-to-style checkboxes and radio buttons in your HTML forms. I hope you like it.
Originally Published Dec 28 2017, updated Jan 25 2023
See also:
- 10 Best Toggle Switch JavaScript And CSS Libraries
- 10 Best Custom Checkbox And Radio Input Replacements
1. Pretty Checkbox & Radio Inputs with Bootstrap
A pure CSS solution to beautify the default checkboxes & radio buttons with Bootstrap styles.
2. Pretty Checkbox & Radio Button Replacement – Pretty.css
A pure CSS/SASS library used to replace the default checkbox & radio inputs with custom icons.
3. Pretty Checkbox CSS Library – checkboxes.css
A pure CSS library used to prettify the regular checkbox inputs with custom styles as shown in the demo page.
4. A CSS Library To Animate Checkbox Input – checkbox.css
A lightweight CSS library used to animate the native checkbox symbols/marks using CSS3 animations.
5. Beautiful Checkbox And Radio Button Replacement With Pure CSS – Magic-check
A very small CSS library used for replacing the default ugly checkboxes and radio buttons.
6. icheck
A CSS extension for Bootstrap that allows you to apply custom styles to the default checkboxes and radio buttons.
7. magic-input
CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
8. icheck-material
icheck-material is a CSS/CSS3 library that lets you beautify & animate the regular checkboxes and radio buttons with Material Design styles.
9. Custom Checkbox And Radio Inputs In Pure CSS
A collection of CSS styles to customize the checkboxes and radio buttons with your own styles, images, and CSS sprites.
10. el-checkbox
A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.