Bir tabloda bir onay kutusu listem var. (satırdaki bir dizi CB&# 3939;den biri)
<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>
Onay kutusu resmini bir çift özel açma/kapama resmiyle değiştirmek istiyorum ve bunun CSS ile nasıl yapılacağını daha iyi bilen var mı diye merak ediyordum.
Bu "CSS ninja" öğreticisini buldum, ancak benim için biraz karmaşık olduğunu itiraf etmeliyim. http://www.thecssninja.com/css/custom-inputs-using-css
Anladığım kadarıyla, sözde bir sınıf kullanmanıza izin veriliyor
td:not(#foo) > input[type=checkbox] + label
{
background: url('/images/off.png') 0 0px no-repeat;
height: 16px;
padding: 0 0 0 0px;
}
Beklentim, yukarıdaki CSS'yi ekleyerek onay kutusunun en azından varsayılan olarak görüntüyü KAPALI durumda göstermesiydi ve ardından AÇIK duruma getirmek için aşağıdakileri ekleyecektim
td:not(#foo) > input[type=checkbox]:checked + label {
background: url('/images/on.png') 0 0px no-repeat;
}
Ne yazık ki, bir yerlerde kritik bir adımı kaçırıyorum gibi görünüyor. Mevcut kurulumumla eşleştirmek için özel CSS3 seçici sözdizimini kullanmaya çalıştım - ancak bir şeyleri kaçırıyor olmalıyım (Önemli ise resimler 16x16 boyutundadır)
http://www.w3.org/TR/css3-selectors/#checked
DÜZENLEME: Eğitimde görüntü değişikliğini girişin kendisine değil etikete uyguladığı bir şeyi kaçırıyordum. Sayfada onay kutusu sonucu için beklenen değiştirilmiş görüntüyü hala alamıyorum, ancak sanırım yaklaştım.
Çok yaklaştınız bile. Sadece onay kutusunu gizlediğinizden ve input[checkbox] + label
ile şekillendirdiğiniz bir etiketle ilişkilendirdiğinizden emin olun.
Tam Kod: http://gist.github.com/592332
JSFiddle:
CSS3'ü seçerseniz javascript kullanmak gereksiz gibi görünüyor.
Bunu :before
seçicisini kullanarak iki satır CSS ile yapabilirsiniz. (komut dosyası dahil değildir).
Bu yaklaşımın bir diğer avantajı da <label>
etiketine bağlı olmaması ve eksik olsa bile çalışmasıdır.
Not: CSS3 desteği olmayan tarayıcılarda onay kutuları normal görünecektir. (geriye dönük uyumlu).
input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }
Bir demoyu burada görebilirsiniz:
ve bu da resimli:
http://jsfiddle.net/hqZt6/6/
Hala daha fazla özelleştirme arıyorsanız,
Aşağıdaki kütüphaneye göz atın: https://lokesh-coder.github.io/pretty-checkbox/
Teşekkürler