Cara Merubah Desain Radio Buttons

16/05/2014    Faizal Rafik    7185    Artikel Bebas

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.

Pertama teman-teman bisa buat struktur HTML nya seperti dibawah ini :

Kemudian CSS nya seperti di bawah ini :

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 SINI.

No data.