7 beautiful form with only CSS Checkbox

View: 2868    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: References   Fields: Other

10 point/9 review File has been tested

Checkboxes is an HTML element that mostly present on many websites, but hardly few people change its default shape. So why do not we do differently? As this will make the design of our different and beautiful than others.

Introduction

Checkboxes is an HTML element that mostly present on many websites, but hardly few people change its default shape. So why do not we do differently? As this will make the design of our different and beautiful than others.

In this article I will share with you 7 different sample checkboxes so you can apply to your own website.

To start format for each checkbox, we first checkboxes will hide, this will be the format common to all.

1
2
3
input[type=checkbox] {
    visibility: hidden;
}

Form 1:

style-checkboxes-with-css-01

HTML

To begin this pattern, we need a standard html frame as follows:

1
2
3
4
<div class="checkboxOne">
    <input type="checkbox" value="1" id="checkboxOneInput" name="" />
    <label for="checkboxOneInput"></label>
</div>

First, we will need to format the slider bar bar as follows:

1
2
3
4
5
6
7
8
.checkboxOne {
    width: 40px;
    height: 10px;
    background: #555;
    margin: 20px 80px;
    position: relative;
    border-radius: 3px;
}

Now, we will label formatting elements act as a drag on the slider button. At the same time we will create the effect of drag from left to right based on the transition properties.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * Create the slider from the label
 */
.checkboxOne label {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
 
    -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: -3px;
    left: -3px;
 
    background: #ccc;
}

This default Slider in position unchecked (off) and when we click on the checkbox, buttons will move from left to right, and to do this, then you add the following css:

1
2
3
4
5
6
/**
 * Move the slider in the correct position if the checkbox is clicked
 */
.checkboxOne input[type=checkbox]:checked + label {
    left: 27px;
}

That is all what we need for the first checkbox.

Form 2:

style-checkboxes-with-css-02

This checkbox form just as the first sample, but there's a difference here that will change color when the slider button status changes.

This is the standard framework for formatting html this form are as follows:

1
2
3
4
<div class="checkboxTwo">
   <input type="checkbox" value="1" id="checkboxTwoInput" name="" />
   <label for="checkboxTwoInput"></label>
</div>

First remains the format for the first bar:

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Checkbox Two
 */
.checkboxTwo {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;
 
    border-radius: 50px;
    position: relative;
}

This form also has an inner checkbox bar, and we will leverage: before pseudo class to the inner bar:

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Create the line for the circle to move across
 */
.checkboxTwo:before {
    content: '';
    position: absolute;
    top: 19px;
    left: 14px;
    height: 2px;
    width: 90px;
    background: #111;
}

Next, we will turn the button on the slider label

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * Create the circle to click
 */
.checkboxTwo label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
 
    -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: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}

Finally the status display when the checkbox is clicked.

1
2
3
4
5
6
7
/**
 * Create the click event for the checkbox
 */
.checkboxTwo input[type=checkbox]:checked + label {
    left: 84px;
    background: #26ca28;
}

Form 3:

style-checkboxes-with-css-03

This sample was upgraded from Form 2 to display text on and off, enabling users to easily distinguish more checkbox status.

HTML

1
2
3
4
<div class="checkboxThree">
  <input type="checkbox" value="1" id="checkboxThreeInput" name="" />
  <label for="checkboxThreeInput"></label>
</div>

Slider format for bar

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Checkbox Three
 */
.checkboxThree {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;
 
    border-radius: 50px;
    position: relative;
}

Next is the format for displaying content "On"

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Create the text for the On position
 */
.checkboxThree:before {
    content: 'On';
    position: absolute;
    top: 12px;
    left: 13px;
    height: 2px;
    color: #26ca28;
    font-size: 16px;
}

Off

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Create the label for the off position
 */
.checkboxThree:after {
    content: 'Off';
    position: absolute;
    top: 12px;
    left: 84px;
    height: 2px;
    color: #111;
    font-size: 16px;
}

The end effect is a slider moves from side to side.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * Create the pill to click
 */
.checkboxThree label {
    display: block;
    width: 52px;
    height: 22px;
    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: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}
 
/**
 * Create the checkbox event for the label
 */
.checkboxThree input[type=checkbox]:checked + label {
    left: 60px;
    background: #26ca28;
}

Form 4:

style-checkboxes-with-css-04

In this sample, we will create a checkbox is a circle, and when clicking inside the circle, color will change when the checkbox is clicked.

HTML

1
2
3
4
<div class="checkboxFour">
  <input type="checkbox" value="1" id="checkboxFourInput" name="" />
  <label for="checkboxFourInput"></label>
</div>

Now we will create a big circle outside.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
/**
 * Checkbox Four
 */
.checkboxFour {
    width: 40px;
    height: 40px;
    background: #ddd;
    margin: 20px 90px;
 
    border-radius: 100%;
    position: relative;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

You should leave this place for granted, just to border-radius: 100%; as we have just one circle. Remember this technique for other uses was offline.

Next we will format the inner circle.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * Create the checkbox button
 */
.checkboxFour label {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100px;
 
    -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;
    left: 5px;
    z-index: 1;
 
    background: #333;
 
    -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

When you click on checkbo then we will change the background color of the inner circle.

1
2
3
4
5
6
/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
    background: #26ca28;
}

Form 5 :

style-checkboxes-with-css-05

Perhaps this pattern quite similar to the default template checkbox, but it looks slender and smooth.

HTML

1
2
3
4
<div class="checkboxFive">
   <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
   <label for="checkboxFiveInput"></label>
</div>

With this model, we do not need anything more for card formats div.

1
2
3
4
5
6
7
8
/**
 * Checkbox Five
 */
.checkboxFive {
    width: 25px;
    margin: 20px 100px;
    position: relative;
}

Now, the label element is formatted as a checkbox.

01
02
03
04
05
06
07
08
09
10
11
12
13
/**
 * Create the box for the checkbox
 */
.checkboxFive label {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: #eee;
    border:1px solid #ddd;
}

Now we will create the "mark" (tick) inside the checkbox.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * Display the tick inside the checkbox
 */
.checkboxFive label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;
 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

And effect as clicking

01
02
03
04
05
06
07
08
09
10
11
12
/**
 * Create the hover event of the tick
 */
.checkboxFive label:hover::after {
    opacity: 0.5;
}
/**
 * Create the checkbox state for the tick
 */
.checkboxFive input[type=checkbox]:checked + label:after {
    opacity: 1;
}

Form 6

style-checkboxes-with-css-06

This is a template for those who love to design flat (Flat Design).

HTML

1
2
3
4
5
<div class="flatRoundedCheckbox">
  <input type="checkbox" name="" id="flatOneRoundedCheckbox" value="1">
  <label for="flatOneRoundedCheckbox"></label>
  <div></div>
</div>

First we will create a slider bar as follows:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
.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;
}

Button :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
.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;
}

And effect as clicking

1
2
3
4
5
6
7
8
.flatRoundedCheckbox input[type=checkbox]:checked ~ div
{
    background: #4fbe79;
}
 
.flatRoundedCheckbox input[type=checkbox]:checked ~ label {
    left: 85px;
}

Form 7:

style-checkboxes-with-css-07

HTML

1
2
3
4
5
<div class="flatCheckbox">
   <input type="checkbox" name="" id="flatOneCheckbox" value="1">
   <label for="flatOneCheckbox"></label>
   <div></div>
</div>

The format for the slider bar

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.flatCheckbox
{
    width: 120px;
    height: 50px;
    margin: 20px 30px;
    position: relative;
}
.flatCheckbox div
{
    width: 100%;
    height:100%;
    background: #2fca6c;
    position: relative;
    top:-30px;
}

Button :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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;
}
.flatCheckbox label:before
{
    color: #ccc;
    content:'|||';
    font-size: 15px;
    letter-spacing: 1px;
    position: absolute;
    left: 7px;
    top:11px;
}

Effects when click

1
2
3
4
5
6
7
8
.flatCheckbox input[type=checkbox]:checked ~ div
{
    background: #e9513a;
}
 
.flatCheckbox input[type=checkbox]:checked ~ label {
    left: 75px;
}

And finally it was done Modular 7 samples that you want to introduce to you. Honestly, the completion of this post back to help his fatigue ^^ sit too long. But if it helps a lot for you, I see it clearly deserves.

Please study well and succeed all of you.

 

7 beautiful form with only CSS Checkbox

7 beautiful form with only CSS Checkbox Posted on 13-08-2015  Checkboxes is an HTML element that mostly present on many websites, but hardly few people change its default shape. So why do not we do differently? As this will make the design of our different and beautiful than others. 1.1111111111111/10 2868

Comment:

To comment you must be logged in members.

Files with category

  • Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    View: 2893    Download: 0   Comment: 0   Author: none  

    Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    Category: References
    Fields: Other

    0/4 review
    Windows 10 pre-installed Mail application for managing personal email on the device. The latest version of this application but improved a lot and support other email accounts such as Gmail or Yahoo Mail but users almost no "salty" really with this...

  • Step by step instructions to create social networking buttons with CSS3

    View: 1992    Download: 0   Comment: 0   Author: none  

    Step by step instructions to create social networking buttons with CSS3

    Category: References
    Fields: Other

    0.64285714285714/7 review
    CSS3 help web designers have the ability to create buttons (buttons) very nice, today I will share with you two tips decoration for button in your web becomes radiant beauty that no need to use photoshop.

  • You should understand the CSS Box Shadow

    View: 2135    Download: 0   Comment: 0   Author: none  

    You should understand the CSS Box Shadow

    Category: References
    Fields: Other

    1.2083333333333/12 review
    Effects his shadow was introduced in the previous article, however, in this article, I will guide more specific about shadow attributes, you try it with anything. First we try to learn css following paragraph:

  • How to do button movement with beautiful CSS3

    View: 1823    Download: 0   Comment: 0   Author: none  

    How to do button movement with beautiful CSS3

    Category: References
    Fields: Other

    0/5 review
    Previously to create motion effects button, you must draw the button in photoshop, then switched to flash to make it possible to move. But now you need not spend too much time doing it, all because of the emergence of CSS3.

  • Create a dropdown menu with CSS3 effects with beautiful transtions

    View: 2102    Download: 0   Comment: 0   Author: none  

    Create a dropdown menu with CSS3 effects with beautiful transtions

    Category: References
    Fields: Other

    0.40909090909091/11 review
    More of the dropdown menu you want to introduce to you, this will have the effect menu transitions (converted background of menu background from pale to dark). This menu works well on browsers like FF, Chrome, Safary, but unfortunately did not work...

  • How to hack css for all browsers you should know

    View: 1729    Download: 0   Comment: 0   Author: none  

    How to hack css for all browsers you should know

    Category: References
    Fields: Other

    1.5/9 review
    In the process of web design, which makes it the most headaches is how to design web pages that you can run on the browser. Especially when clients use the old as IE6 browser such. However, with this article, you will easily edit interface runs well...

  • Create Accordion with extremely beautiful CSS3

    View: 2158    Download: 0   Comment: 0   Author: none  

    Create Accordion with extremely beautiful CSS3

    Category: References
    Fields: Other

    0.75/6 review
    Accordion is a technique that helps you shortened the content that you want displayed on the website. It is often used for the display of submenus. In addition you can also use it for content, images. Before applying this procedure, you have to use...

  • Create the effect Hovercho images with Webkit and CSS3 is great

    View: 1844    Download: 0   Comment: 0   Author: none  

    Create the effect Hovercho images with Webkit and CSS3 is great

    Category: References
    Fields: Other

    0.9/5 review
    WebKit is one open source application framework provides the necessary components built one for your web browser. Along with CSS3, cả have contributed to very nice effect những previously only using JavaScript or JQuery thực beige.​

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd