CSS Custom Checkbox ✅

Have you ever wondered how people get the most awesome checkboxes with custom styling?

It’s one thing that is pretty hard to wrap your head around, but every developer should know.

Let me guide you into making your custom checkboxes.

HTML Structure permalink

<div class="container">
  <div class="checkbox">
    <input type="checkbox" id="checkbox_1" />
    <label for="checkbox_1">Pretty checkbox</label>
  </div>
</div>

To create a custom checkbox, we are leveraging pseudo-elements. We can add different states to one element.

So we are using a container to center the checkbox. Then we create a checkbox div (to identify, we are only changing the checkbox inside this div). And add our checkbox and label as you would typically do.

Note the label says for. This must match the id on the checkbox.

CSS Structure for custom checkboxes permalink

.checkbox input[type='checkbox'] {
  opacity: 0;
  position: absolute;
  width: 0px;
  height: 0px;
  z-index: -1;
}
.checkbox label {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  cursor: pointer;
}
.checkbox label::before,
.checkbox label::after {
  position: absolute;
  left: 0;
  top: 0;
}
.checkbox label::before {
  content: '';
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid;
}
.checkbox label::after {
  content: none;
  height: 5px;
  width: 9px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 4px;
  top: 4px;
}
.checkbox input[type='checkbox']:checked + label::after {
  content: '';
}

If you want to learn how we centered the container read about the easiest center method.

.checkbox input[type='checkbox'] {
  opacity: 0;
  position: absolute;
  width: 0px;
  height: 0px;
  z-index: -1;
}

We make the checkbox inside our div opacity 0. This will hide it from the user since we won’t be using it. And as mentioned by svondervoort in the comments, we make the input absolute positioned, so it doesn’t take up any space. We then set the width and height to 0 and the z-index: -1 to hide it even more.

.checkbox label {
  position: relative;
  display: inline-block;
  padding-left: 22px;
  cursor: pointer;
}

Then the label is where the magic will happen, where we will add the pseudo-element on. We say it must be a relative item (since the pseudo’s will be absolute) and give it a padding-left of 22px (this will offset for the absolute checkbox) Lastly, we add a cursor: pointer; because it is more evident to the user they can click it.

.checkbox label::before {
  content: '';
  display: inline-block;
  height: 16px;
  width: 16px;
  border: 1px solid;
}

Here we have our first pseudo-element. As you can see, we want to add a new element before our label.

When using pseudo-elements, they only show if you give them content! (This is how we hide the checkmark

Then we give it a width, height, and border and have the outline for our new checkbox.

.checkbox label::before,
.checkbox label::after {
  position: absolute;
  left: 0;
  top: 0;
}

We set the before and after element to be absolute and start at position 0 from left and top.

.checkbox label::after {
  content: none;
  height: 5px;
  width: 9px;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 4px;
  top: 4px;
}

The after pseudo-element will be the checkmark icon. We make it with css by using border graphics. And position it 4px from the top and left to center it in our checkbox holder.

You can see this code in action on the following Codepen:

See the Pen CSS Custom Checkbox by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter