Aç-kapa checkbox yapmak (HTML+CSS)

HTML ve CSS kullanarak aç-kapa(toggle) buton oluşturmak o kadar da zor değil, nasıl yapılabileceğini paylaşıyorum.

Aslında en basit yolu ben burada paylaşıyorum ancak farklı yöntemlerde yok değil, burada: https://dev.to/devggaurav/let-s-create-a-custom-toggle-switch-using-html-and-css-33df arkadaş ve yorumlarda da farklı yöntemler paylaşmış.

HTML içeriği:

      <input type="checkbox" id="customCheckbox"/>
      <label for="customCheckbox"></label>

CSS içeriği:

#customCheckbox{
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
}
label{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 1px solid #eeeeee;
  background-color: #d7d8da;
  border-radius: 15px;
  transition: background 0.3s linear;
  cursor: pointer;
}
label:after{
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 15px;
  background-color: #ffffff;
  transition: left 0.3s ease-out;
}


/* Shirli iksir burada! */
#customCheckbox:checked ~ label{
  background-color: #42d77d;
}
#customCheckbox:checked ~ label:after{
  left: 31px;
}

Hepsi bu kadar, canlı örnek ve kodları incelemek için: https://glitch.com/~simple-pure-css-custom-checkbox

JavaScript kullanmak isterseniz bunu kullanabilirsiniz: https://github.com/Konrud/switch-web-component