Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How To Create Flat Checkboxes with CSS

DZone's Guide to

How To Create Flat Checkboxes with CSS

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

How To Style A Checkbox With CSS Demo

round-checkbox

round-checkbox2


First, we start off with the HTML for the checkbox. This will be inside a div, along with a label and 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 set up 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 colored 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, and 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 color. 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;
}

flat-checkbox

flat-checkbox2

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 similarly to the first checkbox; when you click on the button it will slide to the right of the box and change the color 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 color.

.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 that lets you 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;
}

Have a look at the demo to see what this will create.


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}