Pretty Checkbox Replacement – beautiful-checkbox.css

Category: CSS & CSS3 , Form | April 11, 2018
Author: BanNsS1
Views Total: 773
Official Page: Go to website
Last Update: April 11, 2018
License: MIT

Preview:

Pretty Checkbox Replacement – beautiful-checkbox.css

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

Leave a Reply