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

On Apr 12, 2018

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.

<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.

Bootstrap CSS Default Checkbox Beautiful