Чекбоксы как в айфоне

Видео: https://youtu.be/Dw5E1BSpthE

Код:

<style>
  .checkbox:not(.b-checkbox), .radio:not(.b-radio) {
    flex-direction: column;
  }
.checkbox {
	color: #333;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.checkbox i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.checkbox i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.checkbox i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.checkbox:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.checkbox:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.checkbox input { display: none; }

.checkbox input:checked + i { background-color: #4BD763; }

.checkbox input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.checkbox input:checked + i::after { transform: translate3d(22px, 2px, 0); }
</style>
<script>

Array.from(document.querySelectorAll('.checkbox')).map((checkbox) => {
  checkbox.insertAdjacentHTML('beforeend', '<i></i>');
  if (checkbox.checked) {
checkbox.querySelector('i').style.background = '#4BD763';
}
});
  </script>