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ı?

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:

• Easy CSS3 Checkboxes and Radio Buttons
• Collection of checkbox styles from CSSDeck
• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

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.