HomeCSSCSS Custom Checkbox

CSS Custom Checkbox

Hey, everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom checkbox styled as light. To build this checkbox, we need HTML and CSS. We do not use any images or icons to create the styled checkbox.
 
If you are interested in creating more such custom checkbox designs you can check out this playlist here. This playlist consists of a bunch of tutorials that will teach you how you can style checkboxes using HTML and CSS.
 

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!

Previous articleCSS Witch Animation
Next articleMCQ – 15/10/22
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

four × five =

Most Popular