pretty-checkbox-modified v2.2.1
Modified variant!
I needed a version of pretty checkbox which could handle the asp.net MVC checkboxes generated by Html.Checkbox helpers. The render an additional hidden input which conflicts with how pretty-checkbox works. This repo is a slight variation to be able to still use pretty-checkbox.
:heavy_check_mark: Pretty checkbox
No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. Only CSS!
Check it out the Demo for complete documentation.
Get started
Install the library from bower
, npm
or yarn
package manager
> bower install pretty-checkbox
> npm install pretty-checkbox
> yarn add pretty-checkbox
Add pretty.min.css
in your html
From CDN,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.1/pretty.min.css"/>
or from the source,
<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/>
You can also import pretty.scss
in your main scss file.
@import '../PATH/pretty-checkbox/src/pretty.scss';
PATH
is where the library is downloaded.
Checkbox markup,
<div class="pretty">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Buy vegetables</label>
</div>
Basic examples
Checkbox
<div class="pretty primary">
<input type="checkbox"/>
<label><i class="mdi mdi-check"></i> Primary</label>
</div>
Radio
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 1</label>
</div>
<div class="pretty">
<input type="radio" name="radio">
<label><i class="mdi mdi-check"></i> Option 2</label>
</div>
Refer the Documentation for other features and sass settings.
Custom font library
This library supports wide variety of font icon libraries. Currently tested with FontAwesome
, Bootstrap Glyphicon
, Google Material Design icons(material.io)
, Material Design icons (mdi)
, Material Design icons (zmdi)
, Typicons
, Ionicons
.
What else
- Scalable. Can be used in any font sizes
- Cool animations and toggle features
- Customizable. See the demo for
sass
settings - Used in frameworks like bootstrap, Foundation, Sematic UI
- Supported in all mordern browsers, including mobile devices
- Print friendly
- MIT Licence
Thats all, folks!
Inspiration
- Inspired from Okendoken's awesome-bootstrap-checkbox.
- Crazy animations are heavily inspired ( copied 😊 ) from Animista
Contributions are welcome!
7 years ago