How To Create Flat Checkboxes

With the trend of flat design I've decided to extend a previous tutorial of How To Style A Checkbox With CSS with two extra code snippets of styling checkboxes with a flat design. The first checkbox will have a rounded background with a button on the background, when you click the button it will slide to the right of the background and change colour.

First we start off with the HTML for the checkbox this will be inside a div along with a label and a another div, that's all you need and the rest is done with the CSS.

<section>
    <!-- Rounded Checkbox -->
    <h3>Rounded Checkbox</h3>
    <div class="flatRoundedCheckbox">
        <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
        <label for="flatOneRoundedCheckbox"></label>
        <div></div>
    </div>
</section>

When we come to style the checkbox we need to setup the rounded tablet for the button to be placed on. First we style the outer div and give it a width and height, along with a position:relative. We use a position relative so that we can absolute position the button inside the coloured tablet.

.flatRoundedCheckbox
{
    width: 120px;
    height: 40px;
    margin: 20px 50px;
    position: relative;
}
.flatRoundedCheckbox div
{
    width: 100%;
    height:100%;
    background: #d3d3d3;
    border-radius: 50px;
    position: relative;
    top:-30px;
}

The button that the user will click is going to be the label, this label will simply be a round circle, because this will move when it is clicked we need to add transition to the label. Then we can position this button in the outer div using absolute position we place it exactly where we want inside the rounded tablet.

.flatRoundedCheckbox label
{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50px;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;

    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #FFF;
}

Now we can style what will happen when the checkbox is checked, for this we can use the :checked selector then the following styles will be applied when the checkbox is checked. Next we use the general adjacent selector ~ to find the div and change the background colour. At the same time we want to move the button to the right of the box, again we use the :checked selector and simply change the left position of the label.

.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
    background: #4fbe79;
}

.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
    left: 85px;
}

The next checkbox's HTML is exactly the same as the first example there is an outer div with a checkbox, a label and another div inside. This checkbox will work similar to the first checkbox, when you click on the button it will slide to the right of the box and change colour of the background.

<section>
    <!-- Flat Checkbox -->
    <h3>Flat Checkbox</h3>
    <div class="flatCheckbox">
        <input type="checkbox" value="1" id="flatOneCheckbox" name="" />
        <label for="flatOneCheckbox"></label>
        <div></div>
    </div>
</section>

To style this we start off by setting the size of the outer div and making sure we include a position relative for this div, so that we can exactly position the button inside the box. Then we style the inner div to be the same size as the outer div this is where we can set the background colour.

.flatCheckbox
{
    width: 120px;
    height: 50px;
    margin: 20px 30px;
    position: relative;
}
.flatCheckbox div
{
    width: 100%;
    height:100%;
    background: #2fca6c;
    position: relative;
    top:-30px;
}

The label is going to be used as the button for the checkbox, this is going to move to the right of the box so add the * transition property* to the label.

.flatCheckbox label
{
    display: block;
    width: 40px;
    height: 40px;

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;

    cursor: pointer;
    position: absolute;
    top: 5px;
    z-index: 1;
    left: 8px;
    background: #fffffd;
}

Inside the button there are three lines to show texture on the button, this is done by using the :before pseudo selector which will allow you to create a new element with a content property you can add text to the button.

.flatCheckbox label:before
{
    color: #ccc;
    content:'|||';
    font-size: 15px;
    letter-spacing: 1px;
    position: absolute;
    left: 7px;
    top:11px;
}

When the checkbox is checked we can change the style of the checkbox by using the :checked selector, when this is checked we can change the background of the box and move the button to the right of the box.

.flatCheckbox input[type=checkbox]:checked ~ div
{
    background: #e9513a;
}

.flatCheckbox input[type=checkbox]:checked ~ label {
    left: 75px;
}