Merubah Tampilan Input Type Checkbox

17/05/2014    Faizal Rafik    1868     Artikel Bebas

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More