Beautiful Checkbox CSS - Custom Checkboxes using CSS

Today we are 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.



Link beautiful-checkbox.css on your HTML page.

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

By using the below list of classes you can customize 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

Usage: 
<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>

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

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.