Css ile Custom Checkbox Yapımı

Blog

Css ile Custom Checkbox Yapımı

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.

Paylaş:

Alakalı Gönderiler

0 Yorum

Yorum Gönder