pretty checkbox

No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. No Javascript!

Github Download

Installation

Step 1: Download from bower, yarn or npm 

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

Alternatively, you can also use CDN link

https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty.min.css

Step 2: Add pretty.css file in your html or import pretty.scss file in your css/sass file

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

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

<div class="pretty">
  <input type="checkbox"/>
  <label><i class="mdi mdi-close"></i>Check me</label>
</div>

Note: mdi mdi-close is from material design icons library. If you use fontawesome ,then it will be fa fa-close

Checkbox

Basic checkbox show code

<div class="pretty">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Square</label>
</div>
<div class="pretty curvy">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Curvy</label> 
</div>
<div class="pretty circle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Circle</label>
</div>

Custom Icons show code

<div class="pretty">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-texture"></i> Include</label>
</div>
<div class="pretty curvy">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-star"></i> Favorite</label>
</div>
<div class="pretty circle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-record"></i> Add</label>
</div>

Checkbox colors show code

<div class="pretty primary">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty success">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty warning">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty info">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty danger">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Danger</label>
</div>

Checkbox outline colors show code

<div class="pretty o-primary">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty o-success">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty o-warning">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty o-info">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty o-danger">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Danger</label>
</div>

Hover effect show code

<div class="pretty primary hover">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Solid</label>
</div>
<div class="pretty o-success hover">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Outline</label>
</div>

Checkbox without box show code

<div class="pretty o-success plain">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-check"></i> Include</label>
</div>
<div class="pretty o-danger plain">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-close"></i> Ignore</label>
</div>

Smooth Animation show code

<div class="pretty smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Jan</label>
</div>
<div class="pretty o-info circle smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check-all"></i> Feb</label>
</div>
<div class="pretty danger smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-close"></i> Mar</label>
</div>
<div class="pretty success circle smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Apr</label>
</div>

Crazy Animation show code

<div class="pretty info circle a-bounce">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Bounce</label>
</div>
<div class="pretty info circle a-jelly">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Jelly</label>
</div>
<div class="pretty info curvy a-tada">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Tada</label>
</div>
<div class="pretty info curvy a-vibrate">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Vibrate</label>
</div>
<div class="pretty info curvy a-rotate">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> Rotate</label>
</div>

Disabled Checkbox show code

<div class="pretty inline">
  <input type="checkbox" disabled> 
  <label><i class="mdi mdi-check"></i> Disabled</label>
</div>
<div class="pretty circle">
  <input type="checkbox" disabled> 
  <label><i class="mdi mdi-check"></i> Disabled</label>
</div>
<div class="pretty success">
  <input type="checkbox" checked disabled> 
  <label><i class="mdi mdi-check"></i> Disabled</label>
</div>

Toggle Checkbox

Toggle between icons show code

<div class="pretty toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-microphone"></i> ON</label>
  <label><i class="mdi mdi-microphone-off"></i> OFF</label>
</div>

Without box show code

<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-wifi"></i> WIFI ON</label>
  <label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
</div>

With colors show code

<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-eye"></i> Preview</label>
  <label><i class="mdi mdi-eye-off"></i> Preview</label>
</div>
<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-play"></i> Play</label>
  <label><i class="mdi mdi-pause"></i> Pause</label>
</div>
<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-email-outline"></i> Read</label>
  <label><i class="mdi mdi-email-open-outline"></i> Unread</label>
</div>

With toggle colors show code

<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-thumb-up success"></i> Good</label>
  <label><i class="mdi mdi-thumb-down danger"></i> Bad</label>
</div>
<div class="pretty plain toggle">
  <input type="checkbox"/> 
  <label><i class="mdi mdi-reply info"></i> Reply</label>
  <label><i class="mdi mdi-share warning"></i> Forward</label>
</div>

Radio

Basic Radio buttons show code

<div class="pretty circle">
  <input type="radio" name="radio1"> 
  <label><i class="default"></i> Male</label>
</div>
<div class="pretty circle">
  <input type="radio" name="radio1"> 
  <label><i class="default"></i> Female</label>
</div>
<div class="pretty circle">
  <input type="radio" name="radio1"> 
  <label><i class="default"></i> Special</label>
</div>

With colors show code

<div class="pretty circle primary">
  <input type="radio" name="radio19"> 
  <label><i class="default"></i> Primary</label>
</div>
<div class="pretty circle success">
  <input type="radio" name="radio19"> 
  <label><i class="default"></i> Success</label>
</div>
<div class="pretty circle info">
  <input type="radio" name="radio19"> 
  <label><i class="default"></i> Info</label>
</div>
<div class="pretty circle warning">
  <input type="radio" name="radio19"> 
  <label><i class="default"></i> Warning</label>
</div>
<div class="pretty circle danger">
  <input type="radio" name="radio19"> 
  <label><i class="default"></i> Danger</label>
</div>

Boxed Radio buttons show code

<div class="pretty inline">
  <input type="radio" name="radio2"> 
  <label><i class="mdi mdi-check"></i> Male</label>
</div>
<div class="pretty inline">
  <input type="radio" name="radio2"> 
  <label><i class="mdi mdi-check"></i> Female</label>
</div>
<div class="pretty inline">
  <input type="radio" name="radio2"> 
  <label><i class="mdi mdi-check"></i> Special</label>
</div>

With colors show code

<div class="pretty primary">
  <input type="radio" name="radio18"> 
  <label><i class="default"></i> Primary</label>
</div>
<div class="pretty success">
  <input type="radio" name="radio18"> 
  <label><i class="default"></i> Success</label>
</div>
<div class="pretty info">
  <input type="radio" name="radio18"> 
  <label><i class="default"></i> Info</label>
</div>
<div class="pretty warning">
  <input type="radio" name="radio18"> 
  <label><i class="default"></i> Warning</label>
</div>
<div class="pretty danger">
  <input type="radio" name="radio18"> 
  <label><i class="default"></i> Danger</label>
</div>

Color Radio buttons show code

<div class="pretty circle primary">
  <input type="radio" name="radio3"> 
  <label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty circle success">
  <input type="radio" name="radio3"> 
  <label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty circle info">
  <input type="radio" name="radio3"> 
  <label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty circle warning">
  <input type="radio" name="radio3"> 
  <label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty circle danger">
  <input type="radio" name="radio3"> 
  <label><i class="mdi mdi-check"></i> Danger</label>
</div>

Outline color Radio buttons show code

<div class="pretty circle o-primary">
  <input type="radio" name="radio4"> 
  <label><i class="mdi mdi-check"></i> $10</label>
</div>
<div class="pretty circle o-success">
  <input type="radio" name="radio4"> 
  <label><i class="mdi mdi-check"></i> $50</label>
</div>
<div class="pretty circle o-info">
  <input type="radio" name="radio4"> 
  <label><i class="mdi mdi-check"></i> $100</label>
</div>
<div class="pretty circle o-warning">
  <input type="radio" name="radio4"> 
  <label><i class="mdi mdi-check"></i> $500</label>
</div>
<div class="pretty circle o-danger">
  <input type="radio" name="radio4"> 
  <label><i class="mdi mdi-check"></i> $1000</label>
</div>

Without Border Radio buttons show code

<div class="pretty circle plain o-primary">
  <input type="radio" name="radio5"> 
  <label><i class="mdi mdi-human"></i> Single</label>
</div>
<div class="pretty circle plain o-success">
  <input type="radio" name="radio5"> 
  <label><i class="mdi mdi-human-male-female"></i> Married</label>
</div>
<div class="pretty circle plain o-info">
  <input type="radio" name="radio5"> 
  <label><i class="mdi mdi-heart"></i> In relationship</label>
</div>

Smooth animation show code

<div class="pretty circle smooth o-primary">
  <input type="radio" name="radio44"> 
  <label><i class="mdi mdi-emoticon-cool"></i> Cool</label>
</div>
<div class="pretty circle smooth o-success">
  <input type="radio" name="radio44"> 
  <label><i class="mdi mdi-emoticon"></i> Emotion</label>
</div>
<div class="pretty circle smooth o-info">
  <input type="radio" name="radio44"> 
  <label><i class="mdi mdi-emoticon-happy"></i> Happy</label>
</div>
<div class="pretty circle smooth o-warning">
  <input type="radio" name="radio44"> 
  <label><i class="mdi mdi-emoticon-neutral"></i> Neutral</label>
</div>
<div class="pretty circle smooth o-danger">
  <input type="radio" name="radio44"> 
  <label><i class="mdi mdi-emoticon-devil"></i> Devil</label>
</div>

Crazy animation show code

<div class="pretty circle a-tada smooth o-primary">
  <input type="radio" name="radio66"> 
  <label><i class="mdi mdi-weather-lightning"></i> Lightning</label>
</div>
<div class="pretty circle a-rotate smooth o-success"> 
  <input type="radio" name="radio66"> 
  <label><i class="mdi mdi-weather-partlycloudy"></i> Cloudy</label>
</div>
<div class="pretty circle a-bounce smooth o-info">
  <input type="radio" name="radio66"> 
  <label><i class="mdi mdi-weather-pouring"></i> Raining</label>
</div>
<div class="pretty circle a-jelly smooth o-warning">
  <input type="radio" name="radio66"> 
  <label><i class="mdi mdi-weather-snowy"></i> Snowy</label>
</div>
<div class="pretty circle a-vibrate smooth o-danger">
  <input type="radio" name="radio66"> 
  <label><i class="mdi mdi-weather-windy-variant"></i> Windy</label>
</div>

Disabled Radio buttons show code

<div class="pretty circle">
  <input type="radio" name="radio6" disabled> 
  <label><i class="mdi mdi-gender-male"></i> Today</label>
</div>
<div class="pretty circle info">
  <input type="radio" name="radio6" checked disabled> 
  <label><i class="mdi mdi-check"></i> Tomorrow</label>
</div>
<div class="pretty circle">
  <input type="radio" name="radio6" disabled> 
  <label><i class="mdi mdi-gender-male-female"></i> Next week</label>
</div>

Toggle Radio buttons

Toggle icons buttons show code

<div class="pretty circle plain toggle">
  <input type="radio" name="radio8"> 
  <label><i class="mdi mdi-bluetooth-off"></i> Bluetooth</label>
  <label><i class="mdi mdi-bluetooth success"></i> Bluetooth</label>
</div>
<div class="pretty circle plain toggle">
  <input type="radio" name="radio8"> 
  <label><i class="mdi mdi-wifi-off"></i> Wifi</label>
  <label><i class="mdi mdi-wifi info"></i> Wifi</label>
</div>
<div class="pretty circle plain toggle">
  <input type="radio" name="radio8"> 
  <label><i class="mdi mdi-ethernet-cable-off"></i> Ethernet</label>
  <label><i class="mdi mdi-ethernet-cable danger"></i> Ethernet</label>
</div>

Without labels show code

<div class="pretty circle plain toggle">
  <input type="radio" name="radio9" checked> 
  <label><i class="mdi mdi-microphone-off"></i></label>
  <label><i class="mdi mdi-microphone danger"></i></label>
</div>
<div class="pretty circle plain toggle">
  <input type="radio" name="radio9"> 
  <label><i class="mdi mdi-microphone-off"></i></label>
  <label><i class="mdi mdi-microphone danger"></i></label>
</div>

Custom Fonts libraries

Fontawesome show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="fa fa-check"></i> fa-check</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="fa fa-close"></i> fa-close</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="fa fa-heart-o"></i> fa-heart-o</label>
  <label><i class="fa fa-heart info"></i> fa-heart</label>
</div>

Bootstrap Glyphicons show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</label>
  <label><i class="glyphicon glyphicon-heart info"></i> glyphicon-heart</label>
</div>

Material Design icons (mdi) show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-check"></i> mdi-check</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="mdi mdi-close"></i> mdi-close</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="mdi mdi-heart-outline"></i> mdi-heart-outline</label>
  <label><i class="mdi mdi-heart info"></i> mdi-heart</label>
</div>

Material Design icons (zmdi) show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="zmdi zmdi-check"></i> zmdi-check</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="zmdi zmdi-close"></i> zmdi-close</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="zmdi zmdi-favorite-outline"></i> zmdi-favorite-outline</label>
  <label><i class="zmdi zmdi-favorite info"></i> zmdi-favorite</label>
</div>

Typicons show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="typcn typcn-tick"></i>typcn-tick</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="typcn typcn-times"></i> typcn-times</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="typcn typcn-heart-outline"></i> typcn-heart-outline</label>
  <label><i class="typcn typcn-heart info"></i> typcn-heart</label>
</div>

Ionicons show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="ion-checkmark-round"></i> ion-checkmark-round</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="ion-close-round"></i> ion-close-round</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="ion-ios-heart-outline"></i> ion-ios-heart-outline</label>
  <label><i class="ion-ios-heart info"></i> ion-ios-heart</label>
</div>

Google Material Design Icons show code

<div class="pretty success smooth">
  <input type="checkbox"> 
  <label><i class="g-mdi" data-icon="done"></i> done</label>
</div>
<div class="pretty circle plain o-danger smooth">
  <input type="checkbox"> 
  <label><i class="g-mdi" data-icon="clear"></i> clear</label>
</div>
<div class="pretty plain smooth toggle">
  <input type="checkbox"> 
  <label><i class="g-mdi" data-icon="favorite_border"></i> favorite_border</label>
  <label><i class="g-mdi info" data-icon="favorite"></i> favorite</label>
</div>

Google material design icons are quite different from other icon fonts. So we need to add a class g-mdi and an attribute with the icon name data-icon="icon_name".

Also supports other libraries and custom font icons...

SCSS variables

Basic settings

$pretty--class-name: notsopretty; 
/* <div class="notsopretty circle"> */

$pretty--border-radius: 0;

$pretty--color-primary: #428bca;
$pretty--color-success: #5cb85c;
$pretty--color-info: #5bc0de;
$pretty--color-warning: #f0ad4e;
$pretty--color-danger: #d9534f;
$pretty--color-border: #b9b9b9;
$pretty--color-radio: #b9b9b9;
$pretty--color-bg: #fff;

/* Google material design icons */
$pretty--gmdi-class-name:'g-mdi';
$pretty--gmdi-name:'Material Icons';
$pretty--gmdi-attr:'data-icon';

Note: Import the pretty.scss file after declaring the variables

More

Try changing the font size

Browser Compatability

> = 10
> = 3.6
> = 14
> = 6
> = 11.6

Inspiration

This project is inspired from awesome-bootstrap-checkbox library.
Crazy animations are heavily inspired ( copied 😊 ) from Animista CSS animation generator.

Contribution

Help me to fix the bugs, or improve the code. Contributions are always welcome :)

Licence

The MIT License (MIT)

You like it? Share!