Tutoria menjelaskan cara merubah desain radio buttons dengan menghilangkan type radio buttons default melalui CSS display:none dan menambahkan selector CSS input[type="radio"] + label:before untuk merubah penampilan radio buttons sesuai keinginan. Tutorial menyertakan contoh kode HTML dan CSS untuk merubah desain radio buttons.

1. 11/3/2014 Visit our website: www.dumetschool.com 1

2. Cara Merubah Desain Radio
Buttons
Hallo teman-teman ketemu lagi dengan saya, pada tutorial kali ini saya akan
mengajarkan bagaimana caranya merubah desain Radio Buttons sesuai keinginan
kita. Banyak murid-murid saya yang belajar di DUMET School yang bertanya
apakah Radio Buttons bisa dirubah ukurannya menjadi besar atau sesuai keinginan
kita jawabnnya bisa. Baiklah langsung saja kita praktekkan ya teman-teman.
11/3/2014 Visit our website: www.dumetschool.com 2

3. Pertama teman-teman bisa buat struktur HTML nya seperti dibawah ini:
11/3/2014 Visit our website: www.dumetschool.com 3

4. Kemudian CSS nya seperti di bawah ini:
11/3/2014 Visit our website: www.dumetschool.com 4

5. Teman-teman bisa lihat di CSS tersebut disitu terdapat selector CSS
input[type="radio"] + label:before yang berfungsi untuk merubah desain radio
buttons nya sesuai keinginan teman-teman tetapi sebelumnya teman-teman harus
menghilangkan type radio buttons bawaan HTML nya dengan cara memberikan
Property CSS display:none. Mudahkan teman-teman.
Sekian dulu tutorial dari saya semoga teman-teman bisa kreasikan desain radio
buttonsnya sesuai keinginan teman-teman. Terima Kasih.
Untuk melihat hasilnya dan kode CSS nya secara keseluruhan bisa di
http://jsfiddle.net/cLssu/2/
11/3/2014 Visit our website: www.dumetschool.com 5

6. 11/3/2014 Visit our website: www.dumetschool.com 6

7. 11/3/2014 Visit our website: www.dumetschool.com 7