Press "Enter" to skip to content

Custom checkbox element using html and css

Custom checkbox using HTML and CSS
List of content

What and Why?

 Well, do I need to explain why we need a custom checkbox element? The default checkbox looks like it’s still in the ’90s. I mean, an HTML checkbox doesn’t support modern design.

Neither with the help of CSS nor with any other trick, the element is aesthetic resistant in itself.

Look and feel of a custom checkbox element (UI)

We can design it like anything we want. For the look and feel, you can use any CSS styling or image. For the demo purpose, I have kept it as simple as possible. 

Demo here

Custom checkbox element
Custom checkbox element

But that won’t restrict you from designing it to anything you want. I am going to discuss the base concept here, using that you can achieve all kind of designs for your custom checkbox using HTML and CSS. Simple! 

The behaviour of a custom checkbox element (UX)

First thing first, we have to understand where we should use a checkbox. Well, we use it when there are more than one options to select.

Demo here

So, keep that in mind and never design it like a radio button. You can if you want, but it is not worth the misrepresentation in UX.

Coming to the custom checkbox component, we will be using a checkbox in the background. We are going to hide the default element and replace it with an image or CSS, whichever is suitable in your case.

You may ask, how this new image or CSS component would respond to our click event? Good question.

I said we are going to hide the element, but what we will keep is the label of that element. Then, will use a “:before” or “:after” CSS pseudo property to append our custom design before or after the label itself.

The good thing about a label is that the click event to select or deselect a checkbox would work if we click on the label. Hence, clicking on the label will set the checked property of the native element to true or false.

Rest is the CSS property, where we will manipulate the checked property to show our desired image or CSS accordingly.

File Structure

File structure of custom checkbox
File structure of custom checkbox

layout.html

 <!DOCTYPE html>
<head>
<script src="custom-checkbox.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
   <p>Q. Would you like to add?</p>
      <p>
        <input type="checkbox" id="em">
        <label for="em">Extra cheese</label>
      </p>
      <p>
        <input type="checkbox" id="md">
        <label for="md">Meyo</label>
      </p>
      <p>
        <input type="checkbox" id="ln">
        <label for="ln">Ketchup</label>
      </p>
</body>
</html> 

style.css

 [type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background: #fff;
}
[type="checkbox"]:checked + label:after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid #15C39A;
    border-width: 0px 3px 3px 0;
    position: absolute;
    top: 2px;
    left: 6px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
} 
Leave a Reply

Your email address will not be published. Required fields are marked *

− 2 = 2