Video Tutorial:
If you are interested to learn through a video tutorial, rather than reading this blog post you can check out the video down below. Also subscribe to my youtube channel where I post new tutorials, tricks and tips related to web development regularly.
Project Folder Structure:
Now before we start the actual coding, let us take a look at the project folder structure. The project folder structure is simple. We create a project folder called – the ‘Custom Styled Checkbox’. Within this folder, we have two files. These files are index.html and style.css. They are the HTML document and the stylesheet respectively.
HTML:
We start with the HTML code. Now copy the code below and paste it into your HTML document. The HTML code consists of a div with the class name – container. Inside the container, we have the checkbox element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Styled Checkbox</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="checkbox" />
</div>
</body>
</html>
CSS:
Now we style the checkbox using CSS. Firstly copy the code provided below and paste it into your stylesheet. Along with the checkbox element, we also make use of the ‘before’ and ‘after’ pseudo-element.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #eeeeee;
}
.container {
background-color: #ffffff;
width: 350px;
height: 350px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: 0 0 60px rgba(1, 0, 5, 0.15);
border-radius: 10px;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 50px;
width: 180px;
background-color: #bfbfbf;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 25px;
cursor: pointer;
transition: 0.5s;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
background-color: #ffffff;
height: 100px;
width: 100px;
box-shadow: 0 0 30px rgba(1, 0, 5, 0.15);
border-radius: 50%;
bottom: -25px;
left: -25px;
transition: inherit;
}
input[type="checkbox"]:after {
content: "";
position: absolute;
height: 40px;
width: 40px;
border: 6px solid #000000;
border-radius: 50%;
right: 130px;
transition: inherit;
}
input[type="checkbox"]:checked {
background-color: #000000;
}
input[type="checkbox"]:checked:before {
left: 125px;
}
input[type="checkbox"]:checked:after {
width: 0;
right: 0;
border-radius: 6px;
background-color: #000000;
}
Your custom styled checkbox is now ready. That’s it for this tutorial. If you have any issues while creating this checkbox, you can download the source code by clicking on the download button below. Also if you have any queries, suggestions or feedback do comment them below.
Happy Coding!
