Video Tutorial:
If you would like to learn by watching 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 tips, tricks and tutorials every alternate day.
Along with these tutorials, I also post multiple choice questions based on HTML, CSS and Javascript that will help you with your interviews.
Project Folder Structure:
Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Checkbox Styled As Light’. Within this folder, we have two files. These files are index.html and style.css. The first file is the HTML document and the second file is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code provided to you below and paste it into your stylesheet. HTML created the structure and layout necessary for our project. The HTML code consists of a div with the class container. Inside this div, we have a checkbox, and it’s the corresponding label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkbox Styled As Light</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="checkbox" id="light" />
<label for="light"></label>
</div>
</body>
</html>
CSS:
We style this checkbox to look like a lamp using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #191e2f;
}
.container {
height: 25em;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
input[type="checkbox"] {
appearance: none;
height: 9.37em;
width: 18.75em;
background-color: #3a3256;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 6.25em;
border-radius: 4.68em;
}
input[type="checkbox"]:before {
position: absolute;
content: "";
height: 8.12em;
width: 8.12em;
background-color: #7d7890;
border-radius: 50%;
top: 0.62em;
left: 0.62em;
transition: 0.3s;
}
label[for="light"] {
height: 6.25em;
width: 0.62em;
background-color: #31353d;
position: absolute;
top: 11em;
left: 8em;
z-index: -1;
transition: 0.3s;
}
label[for="light"]:after {
position: absolute;
content: "";
height: 0;
width: 0.75em;
border-bottom: 1.56em solid #392692;
border-left: 0.62em solid transparent;
border-right: 0.62em solid transparent;
top: 5.93em;
left: -0.68em;
}
input[type="checkbox"],
label[for="light"] {
cursor: pointer;
}
input[type="checkbox"]:checked:before {
background-color: #f5f5f5;
left: 10em;
box-shadow: 0 0 8.75em 1.87em rgba(196, 241, 255, 0.8);
}
input[type="checkbox"]:checked + label {
top: 12em;
}
That’s it for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback comment below.
Happy Coding!
