Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
img
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 

README.md

magic-input

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:

<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 />

Checkbox

<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

Radios

<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

About

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

Topics

Resources

Packages

No packages published
You can’t perform that action at this time.