How to make Default Checkbox Beautiful Using CSS – beautiful-checkbox.css

Are you board with default HTML checkbox want to make default HTML checkbox beautiful then here I am going to share awesome lightweight CSS plugin to beautify the default checkboxes. The beautiful-checkbox.css library allows you to beautify and change styles, sizes, and positions of the native checkbox inputs with pure CSS.

Libraries

Load beautiful-checkbox.css on page.

Following are the list of classes you can use to customize the checkboxes.

• large: large checkbox
• medium: medium checkbox
• small: small checkbox
• tiny: tiny checkbox
• rounded-3: rounded checkbox
• rounded-6: rounded checkbox
• rounded-8: rounded checkbox
• rounded-10: rounded checkbox
• rounded-16: rounded checkbox
• ch-align-right: right alignment
• disabled: disabled checkbox

HTML

Using above classes we can create different different sizes fancy checkboxes.

                      
			

				

					
					

						

					
					Label of a large checkbox
				
			
			
			
			

				

					
					

						

					
					Label of a medium checkbox aligned right
				
			
			
			
			

				

					
					

						

					
					Label of a small checkbox
				
			
			
			
			

				

					
					

						

					
					Label of a tiny checkbox aligned right
				
			

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.