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

382

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.

Social Media Auto Publish Powered By : XYZScripts.com