Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes. In this tutorial we are going to create 5 different checkboxes which you can use on your website.
View the demo to see the checkboxes we are going to create. To start off we need to add one piece of CSS that each of the following checkboxes will need. We need to hide all the original checkboxes as we will be changing the way they look. To do this add the following into your CSS file.
/**
* Start by hiding the checkboxes
*/
input[type=checkbox] {
visibility: hidden;
}
As we are hiding the checkboxes we need to add a label HTML element, when you click on a label with a for attribute it will check the checkbox. This means that we can style the label to handle the click events for our checkboxes. ## Checkbox One
This checkbox is styled like a bar slider, it has a checked and unchecked position. When you click on the slider button (label HTML element) this will check the checkbox and move the slider to the on position. We start off by creating the HTML for the checkbox area.
<section>
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
As we are styling this checkbox to slide across a bar we start off by styling the bar, this will be the div element surrounding the checkbox. We need to style this as a black bar with rounded corners.
/**
* Create the slider bar
*/
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}
Now we can style the label to act as the button on the slider, we want the button to move from one side of the slider to the other so we can add a transition to the label.
/**
* Create the slider from the label
*/
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
}
This slider will now be in the unchecked (off) position, when we check the checkbox we want a reaction to happen so we can move the slider button to the other side of the slider bar. To move the slider button we need to know if the checkbox is checked, if it is then change the left property of the label element.
/**
* Move the slider in the correct position if the checkbox is clicked
*/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}
That's all the CSS you need for the first checkbox. ## Checkbox Two
This checkbox is styled like a slider bar the same as checkbox one but the difference is that this slider button will change colour when it is in the one state. When you click the slider button this will now move to the other side of the bar and change colour of the button. The HTML for this checkbox is going to be exactly the same as checkbox one.
<section>
<h3>Checkbox Two</h3>
<div class="checkboxTwo">
<input type="checkbox" value="1" id="checkboxTwoInput" name="" />
<label for="checkboxTwoInput"></label>
</div>
</section>
The div is going to be a bit larger than the first example and the slider button will slide inside this bar, use the following CSS to style the bar.
/**
* Checkbox Two
*/
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
This checkbox example has an inner bar which is used by the button to slide along, to do this we will use the :before pseudo class on the div to create a new element which we can use as the inner bar.
/**
* 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 can style the label for the checkbox which is used as the button for the slider, this is going to be similar to the first checkbox.
/**
* Create the circle to click
*/
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
To show the checked state of the checkbox we are going to use the same way as the first example, we are going to change the left property and change the background colour of the button.
/**
* Create the click event for the checkbox
*/
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}
Checkbox three goes a step further than checkbox two, it will use the same bar slider motion as the previous example but this time we will display text that will show if the checkbox is checked or not. When we click the slider button to check the checkbox, the button will slide to the other side of the bar and display text to show the checkbox is on. First we are going to start off with the HTML for the checkbox, this is going to be the same as the previous example.
<section>
<h3>Checkbox Three</h3>
<div class="checkboxThree">
<input type="checkbox" value="1" id="checkboxThreeInput" name="" />
<label for="checkboxThreeInput"></label>
</div>
</section>
Again we are going to style the bar the same way as we did for example two. This will create a black bar with rounded corners where we can place the button and the text inside the black bar.
/**
* Checkbox Three
*/
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
When this checkbox is unchecked the slider button will start on the left side of the bar, this means that the "Off" text can be displayed on the right side of the bar. When someone clicks the slider button we can slide this to the right of the bar, when the button slides it will display the "On" text from behind the slider button. First we are going to create the On and Off text to place on the slider bar, for these we are going to use both the :before pseudo class and the :after pseudo class. Inside the :before element we can add a new element with contents of "On" and the :after element will have the contents of "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;
}
Now we create the Off text and position this on the right side of the bar.
/**
* 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 rest of the slider we act just like the previous example, when we click the slider button it will move to the other side of the bar and change colour.
/**
* Create the pill to click
*/
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
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;
}
In this example we are going to create a checkbox that is styled as two circles, when you click the inner circle this will change colour to show that this is now checked. The HTML for this checkbox is exactly the same as the previous examples.
<section>
<h3>Checkbox Four</h3>
<div class="checkboxFour">
<input type="checkbox" value="1" id="checkboxFourInput" name="" />
<label for="checkboxFourInput"></label>
</div>
</section>
Next we are going to create the outer circle for the checkbox. For this we just use the CSS property border-radius and set this to 100% so that it's a full circle.
/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
Next we are going to create the inner circle this will be slightly smaller than the first circle and will have a different background colour. As this circle will be used as the click label this circle will be the label HTML element.
/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
On the checked event of this checkbox we are going to change the background of the inner circle to show that this is checked.
/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}
This checkbox is a bit different to the other boxes, it will act just like a normal checkbox but it looks a bit nicer than the standard checkboxes you get with your browsers. Again the HTML for this checkbox is the same as the previous examples.
<section>
<h3>Checkbox Five</h3>
<div class="checkboxFive">
<input type="checkbox" value="1" id="checkboxFiveInput" name="" />
<label for="checkboxFiveInput"></label>
</div>
</section>
In the previous examples we styled the div to be the bar for the checkbox, for this checkbox we don't need to do this. We can use the div element to set the area for the checkbox.
/**
* Checkbox Five
*/
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}
This label is used for the click event this is going to be styled as the checkbox.
/**
* 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 are going to create the tick inside the box, for this we can use the :after pseudo class to create a new element. To make this look like a tick we create a small box 5px x 9px and add a border to this box. Then we can remove the border from two sides of this box and it will create an element that looks like an L. Now we can use the transform property to rotate the L to make it look 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;
transform: rotate(-45deg);
}
On the above tick we have set the opacity to 0.2 so you will see a semi-transparent tick inside the checkbox. You can change this on the hover event to be a bit darker and on the checked event you can make it a solid colour.
/**
* 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;
}
This will create your new look checkbox. View the demo to see how these checkboxes work. Demo
Originally posted on https://paulund.co.uk/how-to-style-a-checkbox-with-css