SORU
22 EYLÜL 2010, ÇARŞAMBA


Saf CSS Görüntü değiştirme Onay kutusu

Bir tablo içinde bir checkbox listesi var. (satır CB bir sayı)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'> </label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'> </label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'> </label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'> </label></td></tr>

Off resimler/özel bir çift ile checkbox görüntüyü değiştirmek istiyorum ve eğer biri CSS ile bunu yapmak için nasıl daha iyi bir anlayış var mı diye merak ettim?

Bu "" öğretici, ama biraz karmaşık benim için bulduğun itiraf etmek zorundayım. CSS ninja buldum http://www.thecssninja.com/css/custom-inputs-using-css

Söyleyebileceğim kadarıyla, sözde bir sınıf kullanmanıza izin var

 td:not(#foo) > input[type=checkbox]   label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

Benim beklentim yukarıda checkbox en azından KAPALI durumda, görüntüyü göstermek için öntanımlı CSS ekleyerek ve aşağıda, almak için ben eklemek istiyorum

 td:not(#foo) > input[type=checkbox]:checked   label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

Ne yazık ki, bir yerde kritik bir adım eksik gibi görünüyor. Özel CSS3 seçici sözdizimi benim şu anki Kur maçı için kullanmayı denedim ama bir şey (resim 16 x 16 eğer sorun buysa tabii boy) eksik olması gerekir

http://www.w3.org/TR/css3-selectors/#checked

EDİT: Etiket için imaj değişikliği yapar nereye öğretici, güzel bir giriş kendisi yok olmuştu. Hala onay için beklenen takas resmi sayfasında sonuç alamıyorum, ama daha yakın olduğumu düşünüyorum.

CEVAP
22 EYLÜL 2010, ÇARŞAMBA


Yakın zaten. Sadece bir etiketle onay kutusunu ilişkilendirmek ve saklamak için emin input[checkbox] label) tarzı

Tam Kod: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • humanHardDrive

    humanHardDri

    16 Mart 2011
  • max2sims2

    max2sims2

    19 Kasım 2008
  • Press Start

    Press Start

    4 HAZİRAN 2006