Pretty Checkbox Replacement – beautiful-checkbox.css

Preview:

Description:

The beautiful-checkbox.css library allows you to beautify and change styles, sizes, and positions of the native checkbox inputs with pure CSS.

How to use it:

Import the necessary stylesheet ‘beautiful-checkbox.css’ into the document and done.

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

Create a large checkbox input.

<div class="checkbox large">
  <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>

Available CSS classes to customize the checkbox.

• 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

Changelog:

01/27/2019

• Some fixes