Beautify Radio and Checkbox with pure CSS.
CSS JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css can min css Mar 1, 2016
sass Prefix variable names to avoid conflicts Apr 19, 2016
.csscomb.json add .csscomb.json Feb 15, 2016
.gitignore add .gitignore Feb 15, 2016
LICENSE Initial commit Feb 4, 2016
README.md update readme Mar 1, 2016
bower.json add bower.json Feb 15, 2016
gulpfile.js update gulpfile Mar 1, 2016
package.json v1.0.3 Apr 19, 2016

README.md

Magic-check

Beautify Radio and Checkbox with pure CSS.

Demo

Demo

Install

  • bower: bower install --save magic-check
  • npm: npm install --save magic-check

Usage

<link rel="stylesheet" href="bower_components/magic-check/css/magic-check.css">

Checkbox

<div>
  <input class="magic-checkbox" type="checkbox" name="layout" id="1">
  <label for="1">Normal</label>
</div>

<div>
  <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
  <label for="2">Checked</label>
</div>

<div>
  <input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled">
  <label for="3">
    Disabled
  </label>
</div>

<div>
  <input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled">
  <label for="4">Checked && Disabled</label>
</div>

Radio

<div>
  <input class="magic-radio" type="radio" name="radio" id="11">
  <label for="11">Normal</label>
</div>

<div>
  <input class="magic-radio" type="radio" name="radio" id="22" checked>
  <label for="22">Checked</label>
</div>

<div>
  <input class="magic-radio" type="radio" id="33" disabled="disabled">
  <label for="33">Disabled</label>
</div>

<div>
  <input class="magic-radio" type="radio" id="44" disabled="disabled" checked>
  <label for="44">Checked && Disabled</label>
</div>

Browser compatibility

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE9 && IE9+

License

MIT