Skip to content

jaywcjlove/magic-input

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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