Beautiful Checkbox And Radio Button Replacement With Pure CSS – Magic-check

Category: CSS & CSS3 , Form | February 17, 2016
4 Comments
Demo Download
Author:forsigner
Views Total:49,215 views
Official Page:Go to website
Last Update:February 17, 2016
License:MIT

Preview:

Beautiful Checkbox And Radio Button Replacement With Pure CSS – Magic-check

Description:

Magic-check is a very small CSS library used for replacing the default ugly checkboxes and radio buttons.

How to use it:

All you need is to include the style sheet magic-check.css in your html page’s head section.

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

Create a checkbox.

<input class="magic-checkbox" type="checkbox" name="layout" id="1" value="option">
<label for="1"></label>
<label class="text" for="1">
  Checkbox
</label>

Create a radio button.

<input class="magic-radio" type="radio" name="radio" id="2" value="option">
<label for="2">
  Radio button
</label>

See Also:

You Might Be Interested In:

4 thoughts on “Beautiful Checkbox And Radio Button Replacement With Pure CSS – Magic-check”

  1. Abbas Danish

    Hi,
    The label ‘checkbox’ is overlapping on the checkbox. can you please check and suggest how to resolve it. thanks

    Reply ↓
  2. Aparecido

    In the mozilla browser it does not work. Has how to make mozilla work

    Reply ↓
  3. nerdess_dot_net

    the “create a checkbox” markup is wrong above, it should be:

    Checkbox

    Reply ↓
  4. Slawek Jazzbeera

    For me it did not work, maybe some conflict in cms. I tried to write litte part of jquery script that fixes it:

    $(‘.magic-checkbox’).parent().find(‘label’).off().click(function(e){
    e.preventDefault();
    chb = $(this).parent().find(‘input[type=checkbox]’);
    chb.attr(‘checked’)==’checked’ ? chb.removeAttr(‘checked’) : chb.attr(‘checked’,’checked’);
    });

    Reply ↓

Leave a Reply