Hallo teman-teman pada kesempatan kali ini saya akan memberikan tutorial dalam cara Membuat Style pada Input Type Radio. Sebelum kita membuat style pada input type radio
Hal yang harus diperhatikan adalah pertama kita sudah mengenal dengan yang namanya HTML begitupula CSS dan jika teman-teman sudah mengenal tentang HTML dan CSS maka akan sangat mudah untuk memahaminya.
Oke langsung saja kita mulai untuk Membuat Style pada Input Type Radio.
Pertama-tama buka text editor yang teman-teman gunakan lalu ketik script HTML dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<center> <section class=text> <h3>Text Style</h3> <label> <input type=radio name=text id=icon_one checked> <span>One</span> </label> <label> <input type=radio name=text id=icon_two> <span>Two</span> </label> </section> <section class=unicode> <h3>Unicode Characters Style</h3> <label> <input type=radio name=unicode id=unicode_one checked> <span>One</span> </label> <label> <input type=radio name=unicode id=unicode_two> <span>Two</span> </label> </section> <section class=drawing> <h3>CSS Drawing Style</h3> <label> <input type=radio name=drawing id=icon_one checked> <span>One</span> </label> <label> <input type=radio name=drawing id=icon_two> <span>Two</span> </label> </section> </center> |
Jika sudah simpan dengan nama index.html atau terserah teman-teman yang terpenting formatnya .html. lanjut teman-teman ketik script style atau script CSS nya seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
label { display: block; padding: .5em; font-size: 12pt; cursor: pointer; } [type=radio] { display: none; } [type=radio]:checked + span { font-weight: bold; } [type=radio] + span:before { margin-right: .5em; } /* Text */ .text [type=radio] + span:before { content: '[ ]'; font-family: 'Source Code Pro', monospace; } .text [type=radio]:checked + span:before { content: '[x]'; } /* Unicode */ .unicode [type=radio] + span:before { content: 'â˜'; font-size: 1.3em; } .unicode [type=radio]:checked + span:before { content: '☒'; } /* CSS Drawing */ .drawing [type=radio] + span:before { content: ''; display: inline-block; width: .9em; height: .9em; border-radius: 100%; background: transparent; border: 1px solid currentColor; } .drawing [type=radio]:checked + span:before { background: currentColor; } |
Jika sudah simpan dengan nama style.css atau terserah teman-teman dan yang terpenting formatnya .css. dan langkah berikutnya koneksikan antara file html dan file cssnya dengan menggunakan link href di htmlnya.
Jika sudah simpan dan jalankan/run dibrowser yang teman-teman gunakan maka hasilnya akan seperti pada gambar dibawah :
Jika hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Style pada Input Type Radio. Dan untuk pengembangannya teman-teman dapat mencobanya sendiri.
Oke sekian pembahasan tentang cara Membuat Style pada Input Type Radio. Semoga dapat bermanfaat dan sampai bertemu di pembahasan selanjutnya, Terimakasih.