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

Category: CSS & CSS3 , Form | February 17, 2016
Author: forsigner
Views Total: 12,744
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>

You Might Be Interested In:


3 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

Leave a Reply