Kategoriler
Kodlama

Aç-kapa checkbox yapmak (HTML+CSS)

HTML ve CSS kullanarak özel bir geçiş anahtarı oluşturalım. JavaScript gerekmeksizin.

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

wolkanca.com’da Aç-kapa checkbox yapmak (HTML+CSS) veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Aç-kapa checkbox yapmak (HTML+CSS) için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.