A pure CSS library to beautify checkbox and radio buttons.
MIT License
Install the library from npm
or yarn
package manager
> npm install pretty-checkbox // or
> yarn add pretty-checkbox
Add pretty-checkbox.min.css
in your html
jsDelivr
)<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>
Github
)Download the source from Github.
<link rel="stylesheet" href="../<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css"/>
<PATH>
is where the library is downloaded.
SCSS
You can also import pretty-checkbox.scss
in your main scss file.
@import '~pretty-checkbox/src/pretty-checkbox.scss';
Please refer the document for SCSS settings.
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)
<div class="pretty p-default">
<input type="checkbox" />
<div class="state">
<label>Check me</label>
</div>
</div>
Basic checkbox has three variants p-fill
p-thick
p-outline
(default)
You can combine them.
<div class="pretty p-default p-curve p-fill">
<input type="checkbox" />
<div class="state">
<label>Fill</label>
</div>
</div>
Switch has three variants p-outline
p-fill
p-slim
<div class="pretty p-switch p-fill">
<input type="checkbox" />
<div class="state">
<label>On</label>
</div>
</div>
<div class="pretty p-icon">
<input type="checkbox">
<div class="state">
<i class="icon fa fa-check"></i>
<label>Check me</label>
</div>
</div>
Supports SVG file in tag, markup (<svg> ... </svg>
) and sprites
<div class="pretty p-svg">
<input type="checkbox">
<div class="state">
<img class="svg" src="file.svg" />
<label>Check me</label>
</div>
</div>
Supports any type of valid image format.
<div class="pretty p-image">
<input type="checkbox" />
<div class="state">
<img class="image" src="/check.png" />
<label>Block</label>
</div>
</div>
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
<div class="pretty p-default p-curve p-thick">
<input type="checkbox" />
<div class="state p-warning">
<label>Warning</label>
</div>
</div>
There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.
Please refer the documentation to know about them.
Works in all modern browsers.
Chrome >= 26
Firefox >= 16
Safari >= 6.1
Opera >= 15
IE >= 9
Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!
This project is licensed under the MIT License