Nasıl stil için onay kutusunu kullanarak CSS?

SORU

10 Kasım 2010, ÇARŞAMBA

Nasıl stil için onay kutusunu kullanarak CSS?

Checkbox aşağıdaki kullanma tarzı için çalışıyorum:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Ama, hala varsayılan onay kutusunu görüntüleniyor. Nasıl yapmalı?

CEVAP

10 Kasım 2010, ÇARŞAMBA

GÜNCELLEME: Aşağıda cevap CSS3 yaygınlık önce başvurular şeyler devlet. Modern tarayıcılar (Internet Explorer 9 ve üstü de dahil olmak üzere) javascript kullanmadan, tercih edilen stil ile checkbox yedek oluşturmak için daha kolaydır.

İşte bazı yararlı linkler:

Temel sorun değişmedi dikkati çekiyor. Hala stilleri (sınırları, vb.) başvurabilirler. doğrudan checkbox öğesi ve bu stilleri HTML onay kutusunun görünümünü etkiler. Ne değişti, ancak, bu artık mümkün gerçek onay kutusunu gizlemek ve kendi tarz bir element ile, hiçbir şey ama CSS kullanarak değiştirmek için. CSS şimdi yaygın olarak desteklenen :checked seçici vardır, özellikle, çünkü senin yerine doğru kutusunun işaretli durumunu yansıtmak yapabilirsiniz.

BÜYÜK CEVAP

Burada a useful article about styling checkboxes. O yazar bulundu temelde muazzam bir tarayıcıdan diğerine değişir ve birçok tarayıcı her zaman varsayılan onay kutusunu nasıl olursa olsun tarzı görüntü. Çok kolay bir yol değil.

Zor değil javascript checkbox üzerine bir görüntü bindirmesi için kullanın ve bu resim üzerinde tıklama gerçek onay kutusu işaretli olmasına neden olurdu geçici bir çözüm düşünemiyorum. Javascript olmayan kullanıcılar için varsayılan onay kutusunu görür.

Eklemek için düzenlenebilir: burada a nice script that does this for you; gerçek checkbox elemanı gizler, tarz bir zaman dilimi ile değiştirir, ve click olayları yönlendirir.

Bunu Paylaş: