Style checkboxes with css and icon fonts.

alt-checkbox is a jQuery plugin that helps you to style checkboxes with css. It uses icon fonts and scales well.

Let's start with code example

Here we create alt-checkbox instead of standard HTML checkbox. The "checked" state of alt-checkbox is synchronized with the hidden HTML checkbox. You can specify icon font class as well as other options.

<input type="checkbox" id="checkbox3">
<label for="checkbox3">Check Me! I'm big.</label>
 
<script>
  jQuery("#checkbox3").altCheckbox({
    iconClass: "fontawesome-remove",
    sizeClass: "big"
  });
</script>

Alternative to standard HTML checkbox

alt-checkbox is a nice and flexible alternative to a standard HTML checkbox.

It's a jQuery plugin that comes with the default css that can be customized. You can style it as you want by modifying the plugin's styles in the css file.

By default, it utilizes icon fonts that allows to scale the checkbox to any size and apply some exotic icons.

alt-checkbox is created based on the standard HTML checkbox and synchronized with it to reflect the proper checked state.

Features

Custom styling

There's a default style but you can override it and add your own css. Don't be afraid to experiment.

Icon fonts

By default, Font Awesome is used. You can use any icon fonts you wish for checkbox's icon.

Any size

It can be resized as you want without any problem. Label is resized together with checkbox.

Touch, mouse, keyboard

You can use touch, mouse or keyboard events to change checkbox's state.

Icon for "unchecked"

It's possible to specify to show an icon outline for "unchecked" state.

States

There are "unchecked", "checked", "hovered" and "focused" states. These states can be styled.

Server side

It's simple to get the value of alt-checkbox with PHP or any other language on the server side. You can process alt-checkbox with PHP the same way as standard HTML checkbox is processed. So, you can easily replace standard HTML checkbox with alt-checkbox in your project.

<?php if (isset($_POST['checkbox1'])) : ?>
    <p style="color: #ffa500">Checked!</p>
<?php endif; ?>
 
<form action="demo.php" method="post">
    <input type="checkbox" id="checkbox1" name="checkbox1" 
        <?php if (isset($_POST['checkbox1'])) : ?> checked<?php endif; ?>>
    <label for="checkbox1" >Check Me! I'm medium.</label>
    <br><br>
    <input type="submit">
</form>
 
<script>
    jQuery("#checkbox1").altCheckbox();
</script>

Would you like to try it out?

We prepared a JSFiddle demo for you to try it out.