magic-input

CSS3 Styles for Checkbox and Radio Button inputs look prettier.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
magic-input
8532.0.16 months ago8 years agoMinified + gzip package size for magic-input in KB

Readme

magic-input
Buy me a coffee Downloads CI
CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. Live demo
Usage
$ npm install magic-input

Include dist/magic-input.css or dist/magic-input.min.css in your html. If your use Stylus use magic-input.styl
import 'magic-input/dist/magic-input.min.css';
// or
import 'magic-input/lib/magic-input.styl';

Or manually download and link magic-input in your HTML, It can also be downloaded via UNPKG:
```html
## Checkbox iPhone Style

![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg1.gif)

```html 
<input type="checkbox" class="mgc-switch mgc-sm" checked />
<input type="checkbox" class="mgc-switch"  />
<input type="checkbox" class="mgc-switch mgc-lg" checked />

Checkbox


```html Default Primary Success Info Warning Danger
## Radios

![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg3.gif)

```html 
<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger

Sizing Class

sm for small , lg for large
For Checkbox
mgc-sm mgc-lg
For Radio Button
mgr-sm mgr-lg

Colorize Class

For Checkbox
mgc-primary mgc-info mgc-success mgc-warning mgc-danger
For Radio Button
mgr-primary mgr-info mgr-success mgr-warning mgr-danger