Create Stunning Checkboxes And Radio Buttons With Magic-Input CSS Library

Preview:

Description:

Magic-Input is a CSS/CSS3 library for creating pretty nice toggles/switches to replace the bland and boring checkboxes and radio buttons.

How to use it:

1. Download and import the Magic-Input stylesheet.

<link rel="stylesheet" href="dist/magic-input.min.css">

2. Create iOS style toggle switches from checkboxes.

<input type="checkbox" class="mgc-switch" checked />

3. Style the native checkboxes.

<!-- Square Checkbox -->
<input type="checkbox" class="mgc" checked/>
<!-- Circle Checkbox -->
<input type="checkbox" class="mgc mgc-circle" checked/>
<!-- Radio Button -->
<input type="radio" name="radio1" class="mgr" checked/>

4. Available size classes.

<!-- Small Checkbox -->
<input type="checkbox" class="mgc mgc-sm" checked/>
<!-- Large Checkbox -->
<input type="checkbox" class="mgc mgc-circle mgc-lg" checked/>
<!-- Small Radio Button -->
<input type="radio" name="radio1" class="mgr mgr-sm" checked/>
<!-- Large Radio Button -->
<input type="radio" name="radio1" class="mgr mgr-lg" checked/>

5. Available theme classes.

<!-- Checkbox -->
<input type="checkbox" class="mgc mgc-primary" checked/>
<input type="checkbox" class="mgc mgc-info" checked/>
<input type="checkbox" class="mgc mgc-success" checked/>
<input type="checkbox" class="mgc mgc-warning" checked/>
<input type="checkbox" class="mgc mgc-danger" checked/>
<!-- Radio Button -->
<input type="radio" name="radio1" class="mgr mgr-primary" checked/>
<input type="radio" name="radio1" class="mgr mgr-info" checked/>
<input type="radio" name="radio1" class="mgr mgr-success" checked/>
<input type="radio" name="radio1" class="mgr mgr-warning" checked/>
<input type="radio" name="radio1" class="mgr mgr-danger" checked/>

Changelog:

v2.0.0 (03/01/2023)

• update dependencies