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.


Checkbox Beautiful

Libraries

Load beautiful-checkbox.css on page.

<link type="text/css" rel="stylesheet" href="beautiful-checkbox.css">

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.

                      <!-- Large Checkbox -->
			<div class="checkbox large m-b-2">
				<div class="checkbox-overlay">
					<input type="checkbox" />
					<div class="checkbox-container">
						<div class="checkbox-checkmark"></div>
					</div>
					<label>Label of a large checkbox</label>
				</div>
			</div>
 
			<!-- Medium Checkbox -->
			<div class="checkbox medium m-b-2">
				<div class="checkbox-overlay">
					<input type="checkbox" checked="checked" />
					<div class="checkbox-container">
						<div class="checkbox-checkmark"></div>
					</div>
					<label>Label of a medium checkbox aligned right</label>
				</div>
			</div>
 
			<!-- Small Checkbox -->
			<div class="checkbox small m-b-2">
				<div class="checkbox-overlay">
					<input type="checkbox" />
					<div class="checkbox-container">
						<div class="checkbox-checkmark"></div>
					</div>
					<label>Label of a small checkbox</label>
				</div>
			</div>
 
			<!-- Tiny Checkbox -->
			<div class="checkbox tiny m-b-2">
				<div class="checkbox-overlay">
					<input type="checkbox" checked="checked" />
					<div class="checkbox-container">
						<div class="checkbox-checkmark"></div>
					</div>
					<label>Label of a tiny checkbox aligned right</label>
				</div>
			</div>

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.