Example of a style for a checkbox check box control in a pure CSS setting

The CheckBox checkbox is an HTML element that may be used by every site, but most people do not give them a style, so they look the same on most sites. Why not set the checkbox in your site to a different style and even make it look nothing like a check box.

In this tutorial, we'll create 5 different selection boxes that you can use on your site.

First, you need to add a section of CSS to hide all checkbox checkbox, below we will change its appearance. To do this you need to add a piece of code to your CSS file.

/**
* Hide the default checkbox
*/
Input[type=checkbox] {
Visibility:hidden;
}

After all the checkbox is hidden, we need to add a label HTML element, and we all know that the CheckBox checkbox is selected when you click the label label with the For attribute. This means that we can process our CheckBox checkbox through the Click event of the label.

Style One

This check box style is like a unlock slider, and the slider-checked and unchecked states appear in different locations. When you click the Slider button (label label), the check box is selected, and then the slider moves to the on position.

We begin to create the HTML for the checkbox area.

<section>
<!--Checbox one-->
<div class= "Checkboxone" >
<input type= "checkbox" value= "1" id= "Checkboxoneinput" name= ""/>
<label for= "Checkboxoneinput" ></label>
</div>
</section>

Because the check box for this style, a label is not enough to complete the task, we use a DIV element to contain the checkbox, we need to use them for black bands and rounded corners.

/**
* Create the slider bar
*/
. checkboxone {
width:40px;
height:10px;
Background: #555;
margin:20px 80px;
position:relative;
border-radius:3px;
}

Now, we can use the label as a slider on the stripe, we want the button effect to move from one side of the stripe to the other, and we can add a label transition.

/**
* 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;
}

Now the slider is in the checked (off) position, and when we select the checkbox we want a reaction to occur, so we can move the slider to the other end. We need to know that the check box is selected, and if so, the left property of the label element is changed.

/**
* Move the slider in the correct position if the checkbox is clicked
*/
. Checkboxone input[type=checkbox]:checked + Label {
left:27px;
}

This is the CSS you need to check the checkbox for the first checkbox.

Style Two

This check box is styled like a style, but the slider button changes color. When you click the slider button, it moves to the other side of the strip and changes the color of the button.

HTML code and style one are exactly the same.

<section>
<!--Checbox two-->
<div class= "Checkboxtwo" >
<input type= "checkbox" value= "1" id= "Checkboxtwoinput" name= ""/>
<label for= "Checkboxtwoinput" ></label>
</div>
</section>

The div becomes a larger stripe than the style, and the label remains as a slider, using the CSS below to define it.

/**
* Checkbox Two
*/
. checkboxtwo {
width:120px;
height:40px;
Background: #333;
margin:20px 60px;

border-radius:50px;
position:relative;
}

There is a black bar in the middle of the style, and the slider will slide around it, but the DIV element is already in use, so we need to create a new element with the following: Before Pseudo class.

/**
* Create the line for the circle to move across
*/
. checkboxtwo:before {
Content: ';
Position:absolute;
top:19px;
left:14px;
height:2px;
width:90px;
Background: #111;
}

Like the style one, next we write a CSS style for the label and use it as a slider.

/**
* 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;
}

I want to implement a similar selection to the style and change the left and background properties of the label when I'm elected.

/**
* Create The Click event for the checkbox
*/
. Checkboxtwo input[type=checkbox]:checked + Label {
left:84px;
Background: #26ca28;
}

Style Three

This check box is more complex than style two, and it slides around like the previous example, and when you change the checked and unchecked state, the slider slides to the other side and displays the corresponding text in the original position.

First, we write HTML code, which is the same as before.

<section>
<!--Checbox Three-->
<div class= "Checkboxthree" >
<input type= "checkbox" value= "1" id= "Checkboxthreeinput" name= ""/>
<label for= "Checkboxthreeinput" ></label>
</div>
</section>

Then we use the div as a slider in the same way, and the code below creates a strip of black rounded corners where we can put the slider and text inside.

/**
* Checkbox Three
*/
. checkboxthree {
width:120px;
height:40px;
Background: #333;
margin:20px 60px;

border-radius:50px;
position:relative;
}

When the slider is unchecked, the slider is on the left and the right side shows "off," and when clicked, the slider moves to the right and "on" to the left.
But the number of elements is not enough for us to implement these functions, so we will use: Before and: After two pseudo classes to create two elements, respectively, put "on" and "off."

/**
* Create the text for the ' on position
*/
. checkboxthree:before {
Content: ' On ';
Position:absolute;
top:12px;
left:13px;
height:2px;
Color: #26ca28;
font-size:16px;
}
/**
* Create the label for the ' off position
*/
. checkboxthree:after {
Content: ' Off ';
Position:absolute;
top:12px;
left:84px;
height:2px;
Color: #ddd;
font-size:16px;
}

As before, we add the slider's style, which moves to the other side when clicked and changes color.

/**
* 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;
}

Style Four

In this style, we create two circles, and when clicked, change the color of the circle inside to indicate the selected and unchecked state.
The same HTML code as before.

<section>
<!--Checbox Four-->
<div class= "Checkboxfour" >
<input type= "checkbox" value= "1" id= "Checkboxfourinput" name= ""/>
<label for= "Checkboxfourinput" ></label>
</div>
</section>

Next we create the outer circle for the checkbox, use the Border-radius property of the CSS, and set to 100% to create a positive circle.

/**
* 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);
}

Then we use the LABEL element to create a smaller circle, which changes the color according to the checkbox state.

/**
* 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 the check box is selected, we want to change the background color of the inner circle to indicate the selected state.

/**
* Create the checked state
*/
. Checkboxfour input[type=checkbox]:checked + Label {
Background: #26ca28;
}

Style Five

This check box has a slightly different style, it looks just a little better than the default checkbox style of the browser, but the difference is that we can define its style according to our needs.

First or the same HTML code

<section>
<!--Checbox Five-->
<div class= "Checkboxfive" >
<input type= "checkbox" value= "1" id= "Checkboxfiveinput" name= ""/>
<label for= "Checkboxfiveinput" ></label>
</div>
</section>

In the previous example, we used the DIV as the slider or outer circle of the checkbox, but this time we don't need to, you can use the DIV element to set the area of the check box.

/**
* Checkbox Five
*/
. checkboxfive {
width:25px;
margin:20px 100px;
position:relative;
}
The label label is used for the Click event and the box style of the checkbox we want to define.

/**
* 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;
}

Next, we're going to create a tick in the box, and for that we can use: after the pseudo class to create a new element, in order to implement this style, we can create a 5px x 9px rectangle and add a border to it. When we remove the top and right border, it will look like a letter L. We can then use the CSS Transform property to rotate it so that it looks like a tick.

/**
* 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);
}

In the above CSS, we've set it to be 0.2 transparent, so you'll see that the check box has a semitransparent tick. You can make it a bit deeper while hovering, and when selected, it can be set to opaque.

/**
 * Create The hover event of the tick
 */
. checkboxfive label:hover::after {
 o pacity:0.5;
}
 
/**
 * Create the checkbox state for the Tick
 */
. Checkboxfive Input[type=che Ckbox]:checked + label:after {
 opacity:1;
}
This will create a new checkbox style for you.