pretty checkbox

A pure CSS library to beautify checkbox and radio buttons

Star
Installation

Step 1 : Download from yarn or npm

	             
    > yarn add pretty-checkbox  //or
    > npm install pretty-checkbox

Alternatively, you can also use CDN link

	
    https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css

Step 2 : Add dist/pretty-checkbox.min.css file in your html or import src/pretty-checkbox.scss file in your scss file

	
    @import '~pretty-checkbox/src/pretty-checkbox.scss';

Step 3 : Add the mark up in your file. Can be used with Bootstrap, Foundation, Bulma frameworks.

	
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Check</label>
        </div>
    </div>
Basic checkbox

These are simple checkboxes with three shapes. Add class p-default as like mentioned in above example.

By default, it will be in Square shape. To change, add class p-curve or p-round.

Default
show code 

    <!-- add class p-default -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <!-- add class p-fill -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-thick -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>
Curve
show code 

    <!-- add class p-curve -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>
Round
show code 

    <!-- add class p-round -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>
Switch

Add class p-switch. For shapes add class, p-outline or p-fill or p-slim

iOS style
show code 

    <!-- add class p-switch -->
    <div class="pretty p-switch">
        <input type="checkbox" />
        <div class="state">
            <label>Outline</label>
        </div>
    </div>

    <!-- add class p-switch -->
    <div class="pretty p-switch p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-switch -->
    <div class="pretty p-switch p-slim">
        <input type="checkbox" />
        <div class="state">
            <label>Slim</label>
        </div>
    </div>
Colors

There are five colors. . Can be used as Solid ( p-primary ) or Outline ( p-primary-o ).

To apply colors, add class p-primary to .state class inside .pretty

Solid
show code 

    <!-- primary -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Mixed
show code 

    <!-- primary -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Show colors for all combinations
Outline
show code 

    <!-- primary -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Square & Fill
show code 

    <!-- primary -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Square & Fill & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Square & Thick
show code 

    <!-- primary -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Square & Thick & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Curve
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Curve & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Curve & Fill
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Curve & Fill & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve p-fill">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Curve & Thick
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Curve & Thick & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-curve p-thick">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Round
show code 

    <!-- primary -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Round & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Round & Fill
show code 

    <!-- primary -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Round & Fill & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round p-fill">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Round & Thick
show code 

    <!-- primary -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Round & Thick & Outline
show code 

    <!-- primary -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <!-- success -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <!-- info -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <!-- warning -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <!-- danger -->
    <div class="pretty p-default p-round p-thick">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Switch
show code 

    <!--
        Outline colors wont work for switches
    -->

    <div class="pretty p-switch">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Primary</label>
        </div>
    </div>

    <div class="pretty p-switch p-fill">
        <input type="checkbox" />
        <div class="state p-success">
            <label>Success</label>
        </div>
    </div>

    <div class="pretty p-switch p-slim">
        <input type="checkbox" />
        <div class="state p-info">
            <label>Info</label>
        </div>
    </div>

    <div class="pretty p-switch p-slim">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Warning</label>
        </div>
    </div>

    <div class="pretty p-switch">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>Danger</label>
        </div>
    </div>
Hide combinations

Colors can be added, removed, changed from SCSS settings.

Font icons

You can add any font icons to replace basic checkbox styles. There are two classes to be added. First, p-icon to .pretty. Then add icon class along with font icon classes inside .state .

General
show code 

    <div class="pretty p-icon p-round">
        <input type="checkbox" />
        <div class="state">
            <i class="icon mdi mdi-check"></i>
            <label> Pay Bills</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve">
        <input type="checkbox" />
        <div class="state">
            <i class="icon mdi mdi-close"></i>
            <label> Fuel refill</label>
        </div>
    </div>

    <div class="pretty p-icon">
        <input type="checkbox" />
        <div class="state">
            <i class="icon mdi mdi-close-outline"></i>
            <label> Buy groceries</label>
        </div>
    </div>

This library doesnt comes with any font icons. You need to add appropriate font icon library in your application. In above example, we have used mdi mdi-check, which is from Material design icons library. So, we need to add that library.

Svg

Adding svg icon is very similar to adding font icons. Add class p-svg to .pretty and svg to <svg> tag or <img> tag ( if svg file url is used as img source ).

General
show code 

    <div class="pretty p-svg p-curve">
        <input type="checkbox" />
        <div class="state p-success">
            <!-- svg path -->
            <svg class="svg svg-icon" viewBox="0 0 20 20">
                <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" style="stroke: white;fill:white;"></path>
            </svg>
            <label>Recurring</label>
        </div>
    </div>

    <!-- file source -->
    <div class="pretty p-svg p-plain">
        <input type="checkbox" />
        <div class="state">
            <img class="svg" src="svg/open-iconic/task.svg">
            <label>Done</label>
        </div>
    </div>

    <!-- xlink -->
    <div class="pretty p-svg p-plain">
        <input type="checkbox" />
        <div class="state">
            <svg class="svg" viewBox="0 0 8 8" style="fill: #65bbd2;"><use xlink:href="sprite/open-iconic.svg#lock-locked"></use></svg>
            <label>Lock</label>
        </div>
    </div>

    <!--
    Credit
    http://svgicons.sparkk.fr/
    -->

SVG's are quite different and unpredictable to apply colors properly. This library tries to color it based on few assumptions. Sometimes, it might return weird results. Dont curse me, in those cases.

Image

Adding image is also similar approach like above. Add class p-image to .pretty anf image to <img> tag.

General
show code 

    <!--
        Here we have used p-plain class to remove border for better looking.
        Please refer below PLAIN section to know more.
     -->

    <div class="pretty p-image p-plain">
        <input type="checkbox" />
        <div class="state">
            <img class="image" src="img/checked/001.png">
            <label>Agree</label>
        </div>
    </div>

    <div class="pretty p-image p-plain">
        <input type="checkbox" />
        <div class="state">
            <img class="image" src="img/checked/002.png">
            <label>Subscribe</label>
        </div>
    </div>

    <div class="pretty p-image p-plain">
        <input type="checkbox" />
        <div class="state">
            <img class="image" src="img/checked/003.png">
            <label>Cancel</label>
        </div>
    </div>

    <div class="pretty p-image p-plain">
        <input type="checkbox" />
        <div class="state">
            <img class="image" src="img/checked/004.png">
            <label>Yes</label>
        </div>
    </div>

Good news is, images are automatically resized to fit in to the checkbox. But still, its wise to use small and transparent images for better results. And Obviously, colors are not applicable to images, unless I am the GOD.

Animations

To animate, add class p-smooth or p-jelly or p-tada or p-rotate or p-pulse to .pretty

Smooth
show code 

    <div class="pretty p-default p-round p-smooth">
        <input type="checkbox" />
        <div class="state p-primary">
            <label>Monday</label>
        </div>
    </div>

    <div class="pretty p-icon p-round p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Tuesday</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon mdi mdi-close"></i>
            <label>Wednesday</label>
        </div>
    </div>

    <div class="pretty p-default p-curve p-thick p-smooth">
        <input type="checkbox" />
        <div class="state p-warning">
            <label>Thursday</label>
        </div>
    </div>

    <div class="pretty p-default p-curve p-thick p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <label>Friday</label>
        </div>
    </div>
Jelly
show code 

    <!--
        jelly animation is not applicable to
        p-default style
    -->

    <div class="pretty p-icon p-round p-jelly">
        <input type="checkbox" />
        <div class="state p-primary">
            <i class="icon mdi mdi-check"></i>
            <label>Interested</label>
        </div>
    </div>

    <div class="pretty p-icon p-jelly">
        <input type="checkbox" />
        <div class="state p-info-o">
            <i class="icon mdi mdi-check-all"></i>
            <label>All</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-jelly">
        <input type="checkbox" />
        <div class="state p-danger">
            <i class="icon mdi mdi-bug"></i>
            <label>Bug</label>
        </div>
    </div>
Tada
show code 

    <!--
        tada animation is not applicable to
        p-default style
    -->

    <div class="pretty p-icon p-round p-tada">
        <input type="checkbox" />
        <div class="state p-primary-o">
            <i class="icon mdi mdi-heart"></i>
            <label>Good</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-tada p-plain">
        <input type="checkbox" />
        <div class="state">
            <i class="icon mdi mdi-weather-night"></i>
            <label>Night</label>
        </div>
    </div>

    <div class="pretty p-icon p-fill p-tada">
        <input type="checkbox" />
        <div class="state p-danger">
            <i class="icon mdi mdi-skull"></i>
            <label>Sweetheart</label>
        </div>
    </div>
Rotate
show code 

    <!--
        rotate animation is not applicable to
        p-default and p-switch style
    -->

    <div class="pretty p-icon p-rotate">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Friends</label>
        </div>
    </div>

    <div class="pretty p-icon p-rotate">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon mdi mdi-close"></i>
            <label>Family</label>
        </div>
    </div>
Pulse
show code 

    <!--
        pulse animation is not applicable to
        p-default and p-switch style
    -->

    <div class="pretty p-icon p-round p-pulse">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Allow</label>
        </div>
    </div>

    <div class="pretty p-default p-thick p-pulse">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <label>Occasionally</label>
        </div>
    </div>

Due to the nature of different checkbox design, certain animations are not applicable in some combinations that were disussed below.

Plain

To remove the border ( when checkbox is checked ) add class p-plain to .pretty.

General
show code 

    <!--
        For expected result, use outline color.
        like p-warning-o ( outline ) instead of p-warning ( solid )
    -->

    <div class="pretty p-icon p-round p-smooth p-plain">
        <input type="checkbox" />
        <div class="state p-warning-o">
            <i class="icon mdi mdi-star"></i>
            <label> Favorite</label>
        </div>
    </div>

    <div class="pretty p-default p-round p-smooth p-plain">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label> Add</label>
        </div>
    </div>
Toggle

Toggles are simple show / hide type. Add class p-toggle to .pretty.

Previously, we have seen example with one state. Now we need to add similar state. Each one will have class p-on and p-off class. By default p-off state will be visible. On checking, p-on will be visible.

Simple
show code 

    <div class="pretty p-default p-curve p-toggle">
        <input type="checkbox" />
        <div class="state p-success p-on">
            <label>Subscribed</label>
        </div>
        <div class="state p-danger p-off">
            <label>Subscribe </label>
        </div>
    </div>
With icon
show code 

    <div class="pretty p-icon p-toggle">
        <input type="checkbox" />
        <div class="state p-on">
            <i class="icon mdi mdi-microphone"></i>
            <label>ON</label>
        </div>
        <div class="state p-off">
            <i class="icon mdi mdi-microphone-off"></i>
            <label>OFF</label>
        </div>
    </div>
Without border
show code 

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-on">
            <i class="icon mdi mdi-wifi"></i>
            <label>Wifi on</label>
        </div>
        <div class="state p-off">
            <i class="icon mdi mdi-wifi-off"></i>
            <label>Wifi off</label>
        </div>
    </div>
With color
show code 

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-success-o p-on">
            <i class="icon mdi mdi-eye"></i>
            <label>Show preview</label>
        </div>
        <div class="state p-off">
            <i class="icon mdi mdi-eye-off"></i>
            <label>Hide preview</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-warning-o p-off">
            <i class="icon mdi mdi-play"></i>
            <label>Playing...</label>
        </div>
        <div class="state p-on">
            <i class="icon mdi mdi-pause"></i>
            <label>Paused</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-success-o p-off">
            <i class="icon mdi mdi-thumb-up"></i>
            <label>Good</label>
        </div>
        <div class="state p-danger-o p-on">
            <i class="icon mdi mdi-thumb-down"></i>
            <label>Bad</label>
        </div>
    </div>
Without label
show code 

    <!-- Should not remove <label> tage -->
    <div class="pretty p-icon p-toggle">
        <input type="checkbox" />
        <div class="state p-success-o p-on">
            <i class="icon mdi mdi-reply"></i>
            <label></label>
        </div>
        <div class="state p-info-o p-off">
            <i class="icon mdi mdi-share"></i>
            <label></label>
        </div>
    </div>

Checkbox styles cannot be mixed. If it is p-svg style, both states should be svg.

States

These are checkbox and radio button states like hover, focus, indeterminate. Please check the example code for details.

Hover
show code 

    <div class="pretty p-default p-curve p-has-hover">
        <input type="checkbox" />
        <div class="state p-success-o">
            <label>Remember me</label>
        </div>
        <div class="state p-is-hover">
            <label>Remembered for 15 days</label>
        </div>
    </div>
Focus
show code 

    <div class="pretty p-default p-has-focus">
        <input type="checkbox" />
        <div class="state">
            <label>Remember me</label>
        </div>
    </div>
Indeterminate
show code 

    <div class="pretty p-icon p-curve p-has-indeterminate">
        <input type="checkbox" />
        <div class="state">
            <i class="icon mdi mdi-check"></i>
            <label>Normal</label>
        </div>
        <div class="state p-is-indeterminate">
            <i class="icon mdi mdi-minus"></i>
            <label>Indeterminate</label>
        </div>
    </div>
Disable

Normal disabled attribute in checkbox is enough.

General
show code 

    <!-- Checked -->
    <div class="pretty p-icon p-round">
        <input type="checkbox" checked disabled/>
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Checked</label>
        </div>
    </div>

    <!-- Not Checked -->
    <div class="pretty p-default p-round">
        <input type="checkbox" disabled/>
        <div class="state">
            <label>Not checked</label>
        </div>
    </div>
Lock

It is quite similar to disable, but the only difference is, it will lock and make it look like active. To lock, add class p-locked to .pretty

Lock
show code 

    <!-- Checked -->
    <div class="pretty p-icon p-round p-locked">
        <input type="checkbox" checked/>
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Checked</label>
        </div>
    </div>

    <!-- Not Checked -->
    <div class="pretty p-default p-round p-locked">
        <input type="checkbox"/>
        <div class="state">
            <label>Not checked</label>
        </div>
    </div>
Size

Basically, all the checkbox and radio buttons are sized based on the font size. Bigger the font size, bigger the checkbox and radio. Sometimes, you might need to scale it bit bigger. To do so, add class p-bigger to .pretty

Bigger
show code
done 

    <div class="pretty p-icon p-jelly p-round p-bigger">
        <input type="checkbox" />
        <div class="state p-info">
            <i class="icon material-icons">done</i>
            <label>done</label>
        </div>
    </div>

    <div class="pretty p-default p-smooth p-bigger">
        <input type="checkbox" />
        <div class="state p-danger">
            <label>clear</label>
        </div>
    </div>

Alternatively, we can also set font-size property to class .pretty

Radio buttons

Styling radio buttons are very similar to checkbox. All those features mentioned above, will wotk for radio buttons.

Basic
show code 

    <div class="pretty p-default p-round">
        <input type="radio" name="radio1">
        <div class="state">
            <label>Male</label>
        </div>
    </div>

    <div class="pretty p-default p-round">
        <input type="radio" name="radio1">
        <div class="state">
            <label>Female</label>
        </div>
    </div>

    <div class="pretty p-default p-round">
        <input type="radio" name="radio1">
        <div class="state">
            <label>Special</label>
        </div>
    </div>
Colors
show code 

    <div class="pretty p-default p-curve">
        <input type="radio" name="color" />
        <div class="state p-primary-o">
            <label>Primary</label>
        </div>
    </div>

    <div class="pretty p-default p-curve">
        <input type="radio" name="color" />
        <div class="state p-success-o">
            <label>Success</label>
        </div>
    </div>

    <div class="pretty p-default p-curve">
        <input type="radio" name="color" />
        <div class="state p-info-o">
            <label>Info</label>
        </div>
    </div>

    <div class="pretty p-default p-curve">
        <input type="radio" name="color" />
        <div class="state p-warning-o">
            <label>Warning</label>
        </div>
    </div>

    <div class="pretty p-default p-curve">
        <input type="radio" name="color" />
        <div class="state p-danger-o">
            <label>Danger</label>
        </div>
    </div>
Solid color and icons
show code 

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon_solid" />
        <div class="state p-primary">
            <i class="icon mdi mdi-check"></i>
            <label>New York</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon_solid" />
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>Paris</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon_solid" />
        <div class="state p-info">
            <i class="icon mdi mdi-check"></i>
            <label>Dubai</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon_solid" />
        <div class="state p-warning">
            <i class="icon mdi mdi-check"></i>
            <label>Tokyo</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon_solid" />
        <div class="state p-danger">
            <i class="icon mdi mdi-check"></i>
            <label>Istanbul</label>
        </div>
    </div>
Outline colors
show code 

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon" />
        <div class="state p-primary-o">
            <i class="icon mdi mdi-check"></i>
            <label>Dollar</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon" />
        <div class="state p-success-o">
            <i class="icon mdi mdi-check"></i>
            <label>Euro</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon" />
        <div class="state p-info-o">
            <i class="icon mdi mdi-check"></i>
            <label>Dinar</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon" />
        <div class="state p-warning-o">
            <i class="icon mdi mdi-check"></i>
            <label>Pound</label>
        </div>
    </div>

    <div class="pretty p-icon p-round">
        <input type="radio" name="icon" />
        <div class="state p-danger-o">
            <i class="icon mdi mdi-check"></i>
            <label>Rupee</label>
        </div>
    </div>
Animations
show code 

    <div class="pretty p-icon p-curve p-tada">
        <input type="radio" name="radio66">
        <div class="state p-primary-o">
            <i class="icon mdi mdi-check"></i>
            <label>HTML</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-rotate">
        <input type="radio" name="radio66">
        <div class="state p-success-o">
            <i class="icon mdi mdi-check"></i>
            <label> Javascript</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-pulse">
        <input type="radio" name="radio66">
        <div class="state p-info-o">
            <i class="icon mdi mdi-check"></i>
            <label> Python</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-jelly">
        <input type="radio" name="radio66">
        <div class="state p-warning">
            <i class="icon mdi mdi-check"></i>
            <label> PHP</label>
        </div>
    </div>

    <div class="pretty p-icon p-curve p-smooth">
        <input type="radio" name="radio66">
        <div class="state">
            <i class="icon mdi mdi-check"></i>
            <label>Swift</label>
        </div>
    </div>
Plain
show code 

    <div class="pretty p-icon p-round p-plain p-smooth">
        <input type="radio" name="plain">
        <div class="state p-primary-o">
            <i class="icon mdi mdi-human"></i>
            <label>Single</label>
        </div>
    </div>

    <div class="pretty p-icon p-round p-plain p-smooth">
        <input type="radio" name="plain">
        <div class="state p-info-o">
            <i class="icon mdi mdi-human-male-female"></i>
            <label>Married</label>
        </div>
    </div>

    <div class="pretty p-icon p-round p-plain p-smooth">
        <input type="radio" name="plain">
        <div class="state p-success-o">
            <i class="icon mdi mdi-heart"></i>
            <label>In relationship</label>
        </div>
    </div>
Switch
show code 

    <div class="pretty p-switch">
        <input type="radio" name="switch1" />
        <div class="state p-success">
            <label>Summer</label>
        </div>
    </div>

    <div class="pretty p-switch p-fill">
        <input type="radio" name="switch1" />
        <div class="state p-success">
            <label>Winter</label>
        </div>
    </div>

    <div class="pretty p-switch p-slim">
        <input type="radio" name="switch1" />
        <div class="state p-success">
            <label>Fall</label>
        </div>
    </div>
Tested font icon libraries

Here's the tested font icon libraries. But however, other icon libraries, and icons created from icomoon, fontastic should also work.

Font awesome
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon fa fa-check"></i>
            <label>fa-check</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon fa fa-close"></i>
            <label>fa-close</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-off">
            <i class="icon fa fa-heart-o "></i>
            <label>fa-heart-o</label>
        </div>
        <div class="state p-on p-info-o">
            <i class="icon fa fa-heart"></i>
            <label>fa-heart</label>
        </div>
    </div>
Bootstrap Glyphicons
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon glyphicon glyphicon-ok"></i>
            <label>glyphicon-ok</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon glyphicon glyphicon-remove"></i>
            <label>glyphicon-remove</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-off">
            <i class="icon glyphicon glyphicon-heart-empty"></i>
            <label>glyphicon-heart-empty</label>
        </div>
        <div class="state p-on p-info-o">
            <i class="icon glyphicon glyphicon-heart info"></i>
            <label>glyphicon-heart info</label>
        </div>
    </div>
Material icon ( MDI )
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon mdi mdi-check"></i>
            <label>mdi-check</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon mdi mdi-close"></i>
            <label>mdi-close</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-on p-info-o">
            <i class="icon mdi mdi-heart"></i>
            <label>mdi-heart</label>
        </div>
        <div class="state p-off">
            <i class="icon mdi mdi-heart-outline"></i>
            <label>mdi-heart-o</label>
        </div>
    </div>
Material icon ( ZMDI )
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon zmdi zmdi-check"></i>
            <label>zmdi-check</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon zmdi zmdi-close"></i>
            <label>zmdi-close</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-on p-info-o">
            <i class="icon zmdi zmdi-favorite"></i>
            <label>zmdi-favorite</label>
        </div>
        <div class="state p-off">
            <i class="icon zmdi zmdi-favorite-outline"></i>
            <label>zmdi-favorite-outline</label>
        </div>
    </div>
Typeicons
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon typcn typcn-tick"></i>
            <label>typcn-tick</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon typcn typcn-times"></i>
            <label>typcn-times</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-on p-info-o">
            <i class="icon typcn typcn-heart"></i>
            <label>typcn-heart</label>
        </div>
        <div class="state p-off">
            <i class="icon typcn typcn-heart-outline"></i>
            <label>typcn-heart-outline</label>
        </div>
    </div>
Ion icons
show code 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon ion-checkmark-round"></i>
            <label>ion-checkmark-round</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon ion-close-round"></i>
            <label>ion-close-round</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-on p-info-o">
            <i class="icon ion-ios-heart"></i>
            <label>ion-ios-heart</label>
        </div>
        <div class="state p-off">
            <i class="icon ion-ios-heart-outline"></i>
            <label>ion-ios-heart-outline</label>
        </div>
    </div>
Material icon ( Google )
show code
done
clear
favorite_border
favorite 

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-success">
            <i class="icon material-icons">done</i>
            <label>done</label>
        </div>
    </div>

    <div class="pretty p-icon p-smooth">
        <input type="checkbox" />
        <div class="state p-danger-o">
            <i class="icon material-icons">clear</i>
            <label>clear</label>
        </div>
    </div>

    <div class="pretty p-icon p-toggle p-plain">
        <input type="checkbox" />
        <div class="state p-off">
            <i class="icon material-icons">favorite_border</i>
            <label>favorite_border</label>
        </div>
        <div class="state p-on p-info-o">
            <i class="icon material-icons">favorite</i>
            <label>favorite</label>
        </div>
    </div>

Some font icons might have inaccurate 'X' aspect ratio or some alignment issue. In those cases, the icon will have minute extra space in top or bottom. No worries, it is quite easy to fix it youself :)

Tested SVG libraries

These are couple of well known svg libraries which is tested at this moment.

UIKit
show code 

    <div class="pretty p-svg">
        <input type="checkbox" />
        <div class="state">
            <span class="svg" uk-icon="icon: check"></span>
            <label>check</label>
        </div>
    </div>

    <div class="pretty p-svg p-round p-plain p-jelly">
        <input type="checkbox" />
        <div class="state p-success">
            <span class="svg" uk-icon="icon: check"></span>
            <label>check</label>
        </div>
    </div>
Feathers
show code 

    <!-- using direct svg file -->
    <div class="pretty p-svg p-plain p-bigger p-smooth">
        <input type="checkbox" />
        <div class="state">
            <img class="svg" src="svg/feathers/check-circle.svg"/>
            <label>circle</label>
        </div>
    </div>

    <!-- using data attribute -->
    <div class="pretty p-svg p-plain p-bigger p-jelly">
        <input type="checkbox" />
        <div class="state">
            <span class="svg">
                <i data-feather="check-square"></i>
            </span>
            <label>square</label>
        </div>
    </div>

But my instict says, other libraries also should work.

Scalability
Try changing font size
show code 

    <div id="pretty-scale-test">
        <div class="pretty p-default" id="pretty-scale-test">
            <input type="checkbox" />
            <div class="state">
                <label></label>
            </div>
        </div>

        <div class="pretty p-icon p-curve">
            <input type="checkbox" />
            <div class="state p-danger">
                <i class="icon mdi mdi-close"></i>
                <label></label>
            </div>
        </div>

        <div class="pretty p-round p-fill p-icon">
            <input type="checkbox" />
            <div class="state p-info">
                <i class="icon mdi mdi-check"></i>
                <label></label>
            </div>
        </div>
    </div>
SCSS Customize
Settings

    // If you felt the name is not-so-pretty,
    // you can always change!

    $pretty--class-name: pretty;

    // are you sure, you wanna change my handpicked
    // awesome super duper colors?

    $pretty--color-default:#bdc3c7;
    $pretty--color-primary:#428bca;
    $pretty--color-info:#5bc0de;
    $pretty--color-success:#5cb85c;
    $pretty--color-warning:#f0ad4e;
    $pretty--color-danger:#d9534f;
    $pretty--color-dark:#5a656b;

    // uh, boring z-index stuff, who cares.

    $pretty--z-index-back:0;
    $pretty--z-index-between:1;
    $pretty--z-index-front:2;

    // nobody will change this.

    $pretty--debug:false;
    $pretty--dev-err:'Invalid input type!';
Import

    /* REQUIRED */
    @import '~pretty-checkbox/scss/variables';
    @import '~pretty-checkbox/scss/core';

    /* OPTIONALS */
    @import '~pretty-checkbox/scss/elements/default/fill';
    @import '~pretty-checkbox/scss/elements/default/outline';
    @import '~pretty-checkbox/scss/elements/default/thick';

    @import '~pretty-checkbox/scss/elements/font-icon/general';

    @import '~pretty-checkbox/scss/elements/svg/general';

    @import '~pretty-checkbox/scss/elements/image/general';

    @import '~pretty-checkbox/scss/elements/switch/general';
    @import '~pretty-checkbox/scss/elements/switch/fill';
    @import '~pretty-checkbox/scss/elements/switch/slim';

    @import '~pretty-checkbox/scss/extras/toggle';
    @import '~pretty-checkbox/scss/extras/plain';
    @import '~pretty-checkbox/scss/extras/round';
    @import '~pretty-checkbox/scss/extras/curve';
    @import '~pretty-checkbox/scss/extras/animation';
    @import '~pretty-checkbox/scss/extras/disabled';
    @import '~pretty-checkbox/scss/extras/locked';
    @import '~pretty-checkbox/scss/extras/colors';
    @import '~pretty-checkbox/scss/extras/print';

    @import '~pretty-checkbox/scss/states/hover';
    @import '~pretty-checkbox/scss/states/focus';
    @import '~pretty-checkbox/scss/states/indeterminate';
More
Browser Compatability
Works in all latest browsers.
>= 10
>= 25
>= 40
>= 8
>= 25
Framework Plugins
VueJS plugin - pretty-checkbox-vue
Angular library - ngx-pretty-checkbox
Framework Compatability
Inspirations
Awesome Bootstrap Checkbox - Idea
Animista - Animations.
Contributions
Thanks to all those good people who spend their valuable time and helped to improve this library. And hey, if you found a issue, or would like to improve the code, you are always welcome!
Support and share
Credits
Image icons made by Pixel Buddha, Gregor Cresnar, Freepik, Maxim Basinski from www.flaticon.com
Svg icons from useiconic · sparkk.fr
Slider generated from range.css
Licence
The MIT License
Made with ❤ by Lokesh