Checkbox Customize CSS Without Image

Everyone can easily apply styling on checkbox or radio button without using background images.

by Aqeel Malik

HTML

<span>
    <input type="checkbox" id="box" />
    <label for="box">Checkbox</label>
</span>

CSS

/* Base for label styling */
span{margin:25px;position:relative;display:inline-block;}
[type="checkbox"]{visibility:hidden;margin:0;width:40px;}
label{padding-left:10px; vertical-align:top;line-height:40px;}
/* checkbox aspect */
[type="checkbox"] + label:before,
[type="checkbox"] + label:after {
  content:"";background: purple;
	border-radius: 5px;
	font-size: 30px;text-align:center;
  position: absolute;left:0; top: 0px;
  width: 40px; height: 40px;line-height:40px;
}
/* checked mark aspect */
[type="checkbox"]:checked + label:after {
  content: '✔';
  color: white;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}