THE CSS TRICK

.custom-1 input:checked ~ label:before {
  content: "\2605";
}

Yep, that is all to the “CSS magic” behind custom checkboxes.

• We can use the input:checked pseudo class to specifically target when the checkbox is checked.
• Then we add our own custom HTML symbol checkmark to the label using the pseudo class label:before.
• Feel free to check out this reference for a comprehensive list of HTML symbols.

HIDING THE DEFAULT CHECKBOX

.custom-1 input[type=checkbox] {
  display: none;
}
.custom-1 input:checked ~ label:before {
  content: "\2605";
}

With that, we can safely hide the default checkbox, and it will still work as usual – Since clicking on the label itself will still toggle the checkbox.

THE HTML

  Check Me




  Disabled

Well, there are no changes in the HTML. But just to take note here that we will be creating a “normal custom square checkbox”, and also deal with the style for a disabled checkbox.

PRETTY CSS

/* Hide the default checkbox */
.custom-sq input[type=checkbox] {
  display: none;
}

/* Draw our custom check box */
.custom-sq {
  font-size: 16px;
  line-height: 20px;
}
.custom-sq label {
  cursor: pointer;
}
.custom-sq label:before {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
  content: "\00a0";
  text-align: center;
  background: #eee;
}
.custom-sq label:hover::before{
  background: #aaa;
}

/* On check */
.custom-sq input:checked ~ label:before {
  content: "\2605";
  background: #3f6cb5;
  color: #fff;
}

What the heck happened here? It may look like quite a handful, but this is actually pretty straightforward.

• We hide the default checkbox as usual.
• We give .custom-sq is good font-size and line-height, so that we don’t get a “misaligned” checkbox later.
• Set the label to show a pointer on mouse hover instead.
• Create a nice gray empty box on the same pseudo class label:before.
• Change the color of the gray empty box on mouse hover.
• Finally, as with step 1, add a custom HTML symbol when the checkbox is checked.

DISABLED BOXES

/* Disabled */
.custom-sq input:disabled ~ label {
  color: #888;
}
.custom-sq input:disabled ~ label:before {
  background: #ccc;
}

To deal with the disabled checkboxes we simply target the :disabled pseudo class, and give it a “greyed-out” appearance.

THE SPRING EFFECT

.custom-asq input:checked ~ label:before {
  content: "\2605";
  background: #3f6cb5;
  color: #fff;
  animation: spring 1s; /* attach animation */
  animation-timing-function: ease;
}

/* Spring effect */
@keyframes spring { 
  0% {
    transform: scale(1) translateY(0); 
  }
  10% {
    transform: scale(1.2, 0.6); 
  }
  30% { 
    transform: scale(0.8, 1.1) translateY(-20px); 
  }
  50% { 
    transform: scale(1) translateY(0); 
  }
  100% { 
    transform: translateY(0); 
  }
}

Adding an animation to your checkbox is actually pretty easy. This is a bounce effect that I have created earlier, and all you have to do, is to create the keyframes, then attach it to the label. Done.

ROUND CHECKBOXES

.custom-cir label:before {
  display: inline-block;
  width: 20px;
  border-radius: 20px; /* [THAT IS ALL YOU NEED!] */
  margin-right: 5px;
  content: "\00a0";
  text-align: center;
  background: #eee;
}

For you guys who want to create round checkboxes – All you need is to define the border-radius to half the width… Or just leave it the same as the width for simplicity sake.

DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

The post 3 Steps Simple Pure Css Custom Checkbox appeared first on Code Boxx.