Bu dersimizde css kullanarak checkbox ve radioların tasarımlarını değiştireceğiz.Mantığı basit.Sayfamıza checkbox ve radiolarımızı ekliyoruz.Daha sonra bunlara label atıyoruz.İnputları gizleyip labellere kendi tasarımımızı atıyoruz.Bu sayede labele tıklandığında seçimi yakalaıp işlem yapıyoruz.
Şimde sayfa elemanlarımızı koyalım.
<input type="checkbox" id="a1" checked />
<label for="a1"> <span></span> </label> <br />
<input type="checkbox" id="a2" />
<label for="a2"> <span></span> </label> <br />
<input type="radio" id="a3" name="a"/>
<label for="a3"> <span></span> </label> <br />
<input type="radio" id="a4" name="a" checked />
<label for="a4"> <span></span> </label> <br />
<input type="radio" id="a5" name="a" />
<label for="a5"> <span></span> </label> <br />
Görüntüsü :
Gördüğünüz gibi ilk görüntüsü bu şekilde.Labeller içine eklenenlere tıklayınca bir form elemanınıda seçtirmek için kullanılır.Şimdi checkbox tasarımını yapalım.
/*Checkbox*/
input[type="checkbox"] {//inputlardan checkbox olanları seç
display:none;//ve gizle
}
input[type="checkbox"]+label span{//checkboxların hemen sonundaki ilk labelin içindeki spanı seç
display:inline-block;
width:19px;
height:19px;//boyutlarını belirle
background:url(buton.png) 0px;//ve arkaplan ata
}
input[type="checkbox"]:checked+ label span{//eğer input seçilirse
background:url(buton.png) -19px top no-repeat;//arkaplanını değiştir.
}
Bu şekilde labele tıkladığımızda seçim olacağı için arkaplanı değişiyor.
Görüntüsü :
Şimdi radionun css kodlarını yazalım.checkbosunkiyle aynı.
/*Radio*/
input[type="radio"] {
display:none;
}
input[type="radio"]+label span{
display:inline-block;
width:19px;
height:19px;
background:url(buton.png) -38px;
}
input[type="radio"]:checked+ label span{
background:url(buton.png) -57px top no-repeat;
}
Aynı mantığı buna uyguladık.
Görüntüsü :
İndir : http://ustaderslik.com/dosya/checkbox%20ve%20radio.rar
UstaDerslik
