https://github.com/jaywcjlove/magic-input

CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
https://github.com/jaywcjlove/magic-input

checkbox css3-styles radio-buttons

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jaywcjlove/magic-input
• Owner: jaywcjlove
• Created: 2016-04-27T15:31:15.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2024-10-21T05:11:42.000Z (over 1 year ago)
• Last Synced: 2024-10-29T11:10:43.295Z (over 1 year ago)
• Topics: checkbox, css3-styles, radio-buttons
• Language: HTML
• Homepage: https://jaywcjlove.github.io/magic-input
• Size: 200 KB
• Stars: 85
• Watchers: 9
• Forks: 45
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          

# magic-input

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)

[![Downloads](https://img.shields.io/npm/dm/magic-input.svg?style=flat)](https://www.npmjs.com/package/magic-input)

[![CI](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml)

CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. [Live demo](https://jaywcjlove.github.io/magic-input)

# Usage

```bash

$ npm install magic-input

```

Include `dist/magic-input.css` or `dist/magic-input.min.css` in your html. If your use [Stylus](https://github.com/stylus/stylus) use `magic-input.styl`

```js

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](https://unpkg.com/magic-input/dist/):

```html 

```

## Checkbox iPhone Style

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

```html 

```

## Checkbox

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

```html 

 Default

 Primary

 Success

 Info

 Warning

 Danger

```

## Radios

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

```html 

 Default

 Primary

 Success

 Info

 Warning

 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`