Blog Request tutorial? klik disini!

  • Merubah Tampilan Input Type Checkbox

    Ditulis oleh: Faizal Rafik
    1888 kali dibaca
    17 May / 2014 05:06

    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.






Baca juga

Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading

Kelapa Gading, Jakarta Utara 14240

(Belakang Mall Artha Gading)

Telp: (021) 4585-0387


Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik

Srengseng, Kebon Jeruk, Jakarta Barat 11630

(Depan Hutan Kota Srengseng)

Telp: (021) 5890-8355


Ruko Jalan Taman Daan Mogot Raya No. 23

Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470

(Belakang Mall Citraland dan Kampus UNTAR II)

Telp: (021) 2941-1188


Ruko Jalan Kartini Raya No. 53

Pancoran Mas, Depok 16436

(± 5 Menit dari Kantor Walikota Depok)

Telp: (021) 7720-7657


Rukan Crown Palace Blok A no 12, Jl Prof Dr Soepomo no 231 (Samping Universitas Sahid).

Kec. Tebet, Kel. Menteng Dalam.

(± 1 Menit dari Tugu Pancoran)

Jakarta Selatan 12870

Telp: (021) 2298-3886

Buka setiap hari Senin - Minggu jam 09.00 s/d 21.00

SMS: 0851-0055-5666 / 0819-7555-666 / 0812-9933-3913 / 0812-9393-3210 / 0812-1999-9155