Css ile Custom Checkbox Yapımı

Merhaba arkadaşlar bu yazımda sizlere birçok sitede gördüğünüz custom checkbox'ın nasıl yapıldığından bahsedicem.Css in bize sunduğu :selected seçicisi ile biz bu işi kolaylıkla yapabiliyoruz tabikide label kullanmayıda unutmuyoruz.Bu kullanım için herhangi bir javascript kodunu ihtiyacımız yok.

1. Adım: Html kodları oluşturmak.

<div class="custom-checkbox">
   <input class="checkbox" type="checkbox" id="checkbox">
   <label class="custom-checkbox-label" for="checkbox"></label>
   First Check
</div>

Burada .custom-checkbox adında ana bir div oluşturduk ve bu div içinde bir adet input bir adette label oluşturduk burada önemli olan kısım labelin for="" kısmı ile inputun id="" kısmı aynı olmasıdır.

2. Adım: Checkbox'ı sayfada gizlemek.

.custom-checkbox .checkbox
{
  position:absolute;
  opacity:0; 
}

Burada .custom-checkbox içindeki .checkbox class lı inputları gizledik.

3. Adım: Labeli düzenlemek.

.custom-checkbox-label
{
   position: relative;
   margin:5px;
   vertical-align: middle;
   width:30px;
   height:30px;
   border:1px solid #ddd;
   display:inline-block;
   cursor:pointer;
}

Bu adımda label sanki bir checkbox mış gibi bir görüntü elde ediyoruz.Yani bunun tıklanabilir olduğunu kullanıcılara göstermemiz gerekiyor.

4. Adım : Tıklama işlemi ile Label'de stil değişikliği yapmak.

.checkbox:checked + .custom-checkbox-label
{
  background:#000;
  border:1px solid green !important;
  color:#000;
}
.checkbox:checked + .custom-checkbox-label:before 
{
    content:'OK';
    color:white;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

Burada önemli olan kısım "+"  ve ":selected" kısımlarıdır. ".checkbox:checked + .custom-checkbox-label" bu kısımda biz şunu demek istiyoruz , eğerki .checkbox class'ına sahip olan checkbox seçilince + ile ise devam ediyoruz .custom-checkbox-label labelinde şunları yap şeklinde cümleye dökebiliriz bu kodu.

Son olarak css'in tam halini sizlerle paylaşmak istiyorum.

.custom-checkbox input[type=checkbox]
{
  position:absolute;
  opacity:0; 
}
.custom-checkbox-label
{
   position: relative;
   margin:5px;
   vertical-align: middle;
   width:30px;
   height:30px;
   border:1px solid #ddd;
   display:inline-block;
   cursor:pointer;
}

.checkbox:checked + .custom-checkbox-label
{
  background:#000;
  border:1px solid green !important;
  color:#000;
}
.checkbox:checked + .custom-checkbox-label:before 
{
    content:'OK';
    color:white;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

Umarım Faydalı olmuştur.