Toggle Switch Checkbox

<label class="ss-toggle">
  <input type="checkbox">
  <span></span>
</label>

<label class="ss-toggle">
  <input type="checkbox">
  <span></span>
</label>

.ss-toggle{
  position:relative;
  width:44px;
  height:24px;
}

.ss-toggle input{
  display:none;
}

.ss-toggle span{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:.3s;
}

.ss-toggle span::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  top:3px;
  left:3px;
  transition:.3s;
}

.ss-toggle input:checked + span{
  background:#22c55e;
}

.ss-toggle input:checked + span::before{
  transform:translateX(20px);
}

.ss-toggle{
  position:relative;
  width:44px;
  height:24px;
}

.ss-toggle input{
  display:none;
}

.ss-toggle span{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:.3s;
}

.ss-toggle span::before{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  top:3px;
  left:3px;
  transition:.3s;
}

.ss-toggle input:checked + span{
  background:#22c55e;
}

.ss-toggle input:checked + span::before{
  transform:translateX(20px);
}