let checkbox = document.getElementById('pizza');
checkbox.addEventListener('change', function() {
if (this.checked) {
this.nextElementSibling.classList.add('checked');
} else {
this.nextElementSibling.classList.remove('checked');
}
});
input[type=checkbox] {
display: none;
}
label {
padding-left: 20px;
}
label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid black;
vertical-align: middle;
margin-left: -10px;
margin-right: 20px;
transition: 0.2s;
}
.checked {
content: '';
background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI2IDI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KICA8cGF0aCBkPSJtLjMsMTRjLTAuMi0wLjItMC4zLTAuNS0wLjMtMC43czAuMS0wLjUgMC4zLTAuN2wxLjQtMS40YzAuNC0wLjQgMS0wLjQgMS40LDBsLjEsLjEgNS41LDUuOWMwLjIsMC4yIDAuNSwwLjIgMC43LDBsMTMuNC0xMy45aDAuMXYtOC44ODE3OGUtMTZjMC40LTAuNCAxLTAuNCAxLjQsMGwxLjQsMS40YzAuNCwwLjQgMC40LDEgMCwxLjRsMCwwLTE2LDE2LjZjLTAuMiwwLjItMC40LDAuMy0wLjcsMC4zLTAuMywwLTAuNS0wLjEtMC43LTAuM2wtNy44LTguNC0uMi0uM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==);
background-size: 20px;
background-repeat: no-repeat;
position: absolute;
text-align: center;
left: 11px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<input type="checkbox" class="checkbox" id="pizza">
<label for="pizza">Пицца</label>
<script src="checkbox.js"></script>
</body>
</html>
Как выровнить галочку по центру?