1

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>

Как выровнить галочку по центру?

2 ответа 2

1

Начнем с того что классу .checked не нужно свойство content=''. Так как Вы добавляете картинку background-image, то управление позиционированием картинки выполняется свойством background-position.

.checked {
    ...
    background-position: 12px 2px;
}

или же все вместе:

.checked {
    background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNv…0wLjEtMC43LTAuM2wtNy44LTguNC0uMi0uM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==) 12px 2px no-repeat / 20px;
    ...
}

Рекомендую Вам решить данный вопрос через добавление классу .checked псевдоэлемента ::after.

1
1

Вопрос только про галочку, но позвольте предложить лучшее решение. Чекбоксам не нужны подобные стилизации через добавление/снятие классов и скрипты. Можно гораздо проще решить, используя селектор следующего элемента и состояния чекбокса.

HTML:

<label class="checkbox-label">
    <input type="checkbox"><i></i>
    Пицца
</label>

CSS:

.checkbox-label input {
    opacity: 0;
    position: absolute;
}
.checkbox-label i {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #fff;
}
.checkbox-label input:checked + i {
    background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI2IDI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KICA8cGF0aCBkPSJtLjMsMTRjLTAuMi0wLjItMC4zLTAuNS0wLjMtMC43czAuMS0wLjUgMC4zLTAuN2wxLjQtMS40YzAuNC0wLjQgMS0wLjQgMS40LDBsLjEsLjEgNS41LDUuOWMwLjIsMC4yIDAuNSwwLjIgMC43LDBsMTMuNC0xMy45aDAuMXYtOC44ODE3OGUtMTZjMC40LTAuNCAxLTAuNCAxLjQsMGwxLjQsMS40YzAuNCwwLjQgMC40LDEgMCwxLjRsMCwwLTE2LDE2LjZjLTAuMiwwLjItMC40LDAuMy0wLjcsMC4zLTAuMywwLTAuNS0wLjEtMC43LTAuM2wtNy44LTguNC0uMi0uM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==) no-repeat center center #fff;
    background-size: 15px;
}

Обращаю внимание, что инпут нельзя убирать через display: none. Он должен остаться, но быть невидим.

Рабочий пример этого кода - https://jsfiddle.net/5rh1asfb/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.