pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

Demo and documentation

https://pretty-checkbox.netlify.app/

Features

- Basic
- Shapes - _Square_, _Curve_, _Round_
- Variants - _Default_, _Fill_, _Thick_
- Colors - _Primary_, _Success_, _Info_, _Warning_, _Danger_
- Color types - _Solid_, _Outline_
- Animations - _Smooth_, _Tada_, _Jelly_, _Pulse_, _Rotate_
- Switch - iOS style - _Outline_, _Fill_, _Slim_
- Responsive
- No JavaScript
- Custom Font Icons
- SVG Icons
- Image support
- Toggle between icons / SVG's / images
- Lock
- State - _Focus_, _Hover_, _Indeterminate_
- Supports frameworks - _Bootstrap_, _Foundation_, _Sematic UI_, _Bulma_, ...
- SCSS customization
- Supports all modern browsers, including mobile devices
- Print friendly
- and more... ( _I am kidding, that's all!_ )

Installation

$3

Install using npm or yarn:

``sh
npm install @djthoms/pretty-checkbox # or
yarn add @djthoms/pretty-checkbox
`

Add pretty-checkbox.min.css in your html:

$3

`html
rel="stylesheet"
href="https://unpkg.com/@djthoms/pretty-checkbox/dist/pretty-checkbox.min.css"
/>
`

$3

Download the source from Github.

`html

`

is where the library is downloaded.

$3

You can also import pretty-checkbox.scss in your main scss file.

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

Please refer the document for SCSS settings.

Usage

Pretty checkbox comes with many styles,

| Class name | Description |
| :---------- | :----------------------- |
| p-default | Basic style |
| p-switch | iOS like toggle style |
| p-icon | Custom font icons |
| p-svg | Custom SVG files, markup |
| p-image | Tiny images |

And three shapes p-round p-curve p-square (default)

$3

`html


Basic checkbox has three variants p-fill p-thick p-outline (default)

You can combine them.

`html


Switch has three variants p-outline p-fill p-slim

`html


`html




Note: class icon should be added along with icon class names





Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.



$3

Supports SVG file in tag, markup () and sprites

`html


Check me



Note: class svg to be added in img tag or svg tag.



$3

Supports any type of valid image format.

`html


Block



Note: class image to be added in img tag.



$3

There are five solid colors p-primary p-success p-warning p-info p-danger

And five outline colors p-primary-o p-success-o p-warning-o p-info-o p-danger-o

`html


Include rtl.css in your source file :smile:

More

There are more features like _Radio buttons_ , _Toggle_ , _States_ , _Animations_ , _Border less_ , _Lock_ , _Scale_, _SCSS Settings_.

Please refer the documentation to know about them.

Browser support

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9`

Font Icon libraries

- Font awesome
- Bootstrap Glyphicons
- Material icon ( MDI )
- Material icon ( ZMDI )
- Ion icons
- Typicons
- Material icon ( Google )
- Others not tested, but will work ( 99% ).

SVG

- UIKit
- Feathers
- Others

Libraries

- VueJs - pretty-checkbox-vue
- Angular - ngx-pretty-checkbox
- React - pretty-checkbox-react

Inspiration

- Awesome Bootstrap Checkbox - Idea
- Animista - Animations

Contributions

Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!

License

This project is licensed under the MIT License