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:
Custom Checkboxes And Radio Buttons For Bulma Framework
Create Stunning Checkboxes And Radio Buttons With Magic-Input CSS Library
Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css
Convert Checkboxes & Radio Buttons Into Grouped Buttons – boxed-check.css
Custom Checkboxes, Radio Buttons, Switches In Pure CSS
Custom Checkbox And Radio Inputs In Pure CSS
Pretty Checkbox & Radio Button Replacement – Pretty.css
Animated Checkbox & Radio Button With Custom Marker
Hi,
The label ‘checkbox’ is overlapping on the checkbox. can you please check and suggest how to resolve it. thanks
In the mozilla browser it does not work. Has how to make mozilla work
the “create a checkbox” markup is wrong above, it should be:
Checkbox
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’);
});