CSS Checkbox ve Radio Tasarımını Değiştirme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Checkbox ve Radio Tasarımını Değiştirme

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3096)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/upn3x.png

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ü :
http://ustaderslik.com/resim/ders/upn6d.png

Ş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ü :
http://ustaderslik.com/resim/ders/upn77.png

İndir : http://ustaderslik.com/dosya/checkbox%20ve%20radio.rar



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol