Cacher is the code snippet organizer for pro developers

<style>
* {
  font-size: 30px;
}

input[type=checkbox] {
	display: none;
}

input[type=checkbox] + label:before {
    content: "\2714";
    color: transparent;
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 20px;
    font-weight: 900;
    line-height: 22px;
    margin: -5px 5px 0 0;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    transition: color ease .3s;
}

input[type=checkbox]:checked + label:before {
    color: #000;
    border-color: #000;
}
</style>

<!-- срабатывает если label идет после input и указан id и for -->
<div>
  <input type="checkbox" id="check" name="check" />
  <label for="check">Checkbox</label>
</div>