Merubah Tampilan Input Type Checkbox

Pada tutorial sebelumnya saya sudah mengajarkan ke teman-teman bagaimana caranya merubah desain Radio Buttons sesuai keinginan teman-teman, dan pada tutorial kali ini kita akan belajar bagaimana caranya merubah tampilan pada input type checkbox sesuai keinginan teman-teman. Caranya tidak jauh berbeda dengan cara yang kita lakukan di merubah desain Radio Buttons. Kita hanya menghilangkan property CSS border-radius nya saja. Baiklah langsung saja kita praktekan ya teman-teman.

Teman-teman bisa buat struktur HTML nya seperti di bawah ini :

Lalu setelah buat struktur HTML nya temen-teman bisa buat CSS nya seperti di bawah ini :

Bisa dilihat di CSS tersebut disitu saya menghilangkan terlebih terlebih dahulu type Checkbox bawaan HTML nya dengan Property CSS display:none, dan kemudian membuat ulang desain checkboxnya dengan memanggil selector CSS nya, input [type="checkbox"] + label:before lalu teman-teman bisa isikan property dan value CSS nya sesaui yang di atas, teman-teman bisa merubah height dan width nya sesuai keinginan teman-teman. Mudahkan teman-teman kreasikan desain checkboxnya sesuai kreatifitas teman-teman ya..

Sekian dulu tutorial dari saya semoga bermanfaat dan bisa menambah pengetahuan teman-teman ya. Terima Kasih

Untuk melihat hasilnya dan melihat kode CSS secara keseluruhannya bisa di SINI.