Pretty Checkbox Replacement – beautiful-checkbox.css

Category: CSS & CSS3 , Form | January 27, 2019
Views Total:5,091 views
Official Page:Go to website
Last Update:January 27, 2019


Pretty Checkbox Replacement – beautiful-checkbox.css


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>
    <label>Label of a large checkbox</label>

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



  • Some fixes

You Might Be Interested In:

Leave a Reply