CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 37f5ecd Aug 20, 2018
Failed to load latest commit information.
dist fixed style cannot be displayed. Jul 25, 2016
img update image. Apr 28, 2016
lib fixed style cannot be displayed. Jul 25, 2016
.gitignore first commit Apr 27, 2016
.npmignore Add npmignore Aug 20, 2018
README.md Update README.md Aug 20, 2018
index.html update index.html Apr 27, 2016
package.json released v1.0.2 Aug 20, 2018



CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. Live demo


$ 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:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/magic-input/dist/magic-input.min.css">

Checkbox iPhone Style

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


<input type="checkbox" class="mgc" checked/> Default
<input type="checkbox" class="mgc mgc-primary" checked /> Primary
<input type="checkbox" class="mgc mgc-success" /> Success
<input type="checkbox" class="mgc mgc-info" checked /> Info
<input type="checkbox" class="mgc mgc-warning" checked /> Warning
<input type="checkbox" class="mgc mgc-danger" checked /> Danger


<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