Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a ‘Checkbox With a Clickable Label’. To build this project we would need HTML and CSS. Let’s discover how to build this project in a few simple and easy-to-follow steps.
Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Checkbox With Clickable Label’. Inside this folder, we have the index.html file. We will write inline CSS inside the ‘<style>’ tag since it is too small.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file. We start by creating the container div. The container div has a label tag to display the label for our checkbox. We bind the label to the checkbox using the id of the checkbox in the ‘for’ attribute. Then we create the checkbox using the same id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkbox with a Clickable Label</title>
<style>
body {
background-color: #fdc841;
height: 100vh;
width: 100vw;
margin: 0;
display: grid;
place-items: center;
}
.container {
background-color: #ffffff;
display: inline-flex;
padding: 1em 2em;
font-family: "Poppins", sans-serif;
}
label,
input {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<label for="chckbx">Label</label>
<input type="checkbox" id="chckbx" />
</div>
</body>
</html>
CSS:
Next, we style our checkbox using CSS. For this check, the <style> tag where we have written the CSS, copy the code provided to you above inside and paste it inside your <style> tag.
Our CSS starts with providing a background color, height, width, and margin to the body. We set the display to ‘grid’ and ‘place-items’ to ‘center’ so that we could display the container in the center of the body.
Then we provide background color, padding, and a font family to the container and set the display to ‘inline-flex’ so that the label and checkbox appear beside each other finally, we set the ‘cursor’ as ‘pointer’ for the label and input tag.
That’s it for this tutorial. If you like this tutorial, do check out my youtube channel. I would love to hear your comments, suggestions, and feedback. Do drop them below. We will meet shortly for yet another amazing tutorial.
