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.
