HomeCSSCustom Styled Checkbox | HTML & CSS Tutorial

Custom Styled Checkbox | HTML & CSS Tutorial

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom styled checkbox.
can be tricky. This can be because we cannot directly add background-colors and other properties to the checkbox. But I assure you this tutorial will make that easy for you. And the best part is we need just HTML and pure CSS. We need no images or icons to build this project.
 
In this tutorial, we create a checkbox styled as a toggle switch. In the OFF state, the switch has a ‘0’. When the user clicks on the switch, we change the state to ON. Now that the state is ON, we morph the ‘0’ into ‘1’ with a smooth transition.
 

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

19 − nine =

Most Popular