Forms are pretty bland and boring as they come. But with a little styling, they can become friendly and inviting. 

Input boxes are themselves, easy to style. Their borders, backgrounds, fonts etc can all be changed with the magic of CSS.

Checkboxes and radio buttons, are a little harder. Most browsers ignore any styling you set it, and they'll keep the boring default style the chosen browser gives it.

With a little code, we can change all that. Boiling it down, we are basically hiding the checkbox or radio button, and styling the label button instead. 

Getting started

First thing we'll do, is create the basic HTML for the checkbox and the label required.

<input type="checkbox" name="model" id="model" value="true" />
<label for="model">
    Model
</label>

Next, before we get into the meat of the styling, we'll move over to the CSS and hide the actual text box. You need to include it, because it'll still be triggered either way, and you'll need the results for any form submit later on.

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    display: none;
}

Styling the label

Next, we need to assign basic styling to the label, and make use for our new checkbox.

[type="checkbox"]+label {
    position: relative;
    display: block;
    padding-left: 25px;
    cursor: pointer;
}

Basic checkbox

Now we need to add the default unchecked checkbox. We do this using a :before element. 

[type="checkbox"]+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid #fff;
    background: #141414;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3)
}

Checked option

Now, we need to add the display for when the checkbox is checked. What will happen, is by default, when you click the label, because it's linked via the [for] attribute, it toggles the checked value of the hidden checkbox. We use that value to style the :after element of the label.

First, so that we can animate it, we need to create a non checked value, and a checked value. As both of these share a lot of the same settings, we can combine them for the first part, then you'll have the unchecked and checked version near the bottom.

[type="checkbox"]+label:after {
    content: '';
    position: absolute;
    display: block;
    top: 8px;
    left: 4px;
    height: 8px;
    width: 8px;
    font-size: 18px;
    line-height: 0.8;
    background: #00adef;
    -webkit-transition: all .2s;
    transition: all .2s;
}

Now here is the styling for the unchecked...

[type="checkbox"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

And here is the code for the checked version...

[type="checkbox"]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

Now when you toggle the label, you should have an animated, modern checkbox. 

Here it is in working fashion...