Biasanya checkbox di gunakan untuk memilih item lebih dari satu seperti penggunaan Hobby menggunakan checkbox aplikasi pembayaran dll, checkbox banyak variasinya tapi yang keseringan ialah menggunakan secara default, di satu sisi malas untuk mengkreasikannya dan apapun itu, tapi jika kita hias dengan baik penggunaan checkbox akan terlihat lebih menarik, di satu sisi untuk membangun sebuah web design yang menarik dan dapat juga untuk membuat visitor betah
berlama lama dan membuat visitor merasakan beda dengan website-website lainnya, caranya sangat mudah sekali teman teman cukup menggunakan html5 dan bantuan css kita akan membuat sebuah checkbox yang menarik dan ini lah tema yang akan kita bahas Cara Membuat Checkbox Lebih Menarik Menggunkan HTML5, oke langsung saja teman teman bisa langsung siapkan text editornya untuk memulai membuatnya, teman teman buat file bernama index.html atau apalah bebas sesuai dengan keinginan teman teman, oke teman teman bisa salinkan scriptnya dibawah sini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> body {padding: 20px} input[type="checkbox"]{display: none;} label {cursor: pointer; font-weight: bold; padding-left: 30px} input[type="checkbox"]:checked + label {color: blue;background: url(http://bizhub.vn/Sites/BizHub/css/img/i-like.png) no-repeat 10px;} </style> <body> <input type="checkbox" id="option"> <label for="option">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facere corporis maiores eveniet soluta porro repellat quibusdam quis cum at similique, voluptate ab, ex assumenda provident quas distinctio vero suscipit?</label><br/> <input type="checkbox" id="option2"> <label for="option2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, rem. Debitis vel vitae omnis incidunt voluptate minima, possimus quod laborum autem facilis ipsum quam eum. Laudantium eligendi illum, explicabo adipisci. </label><br/> <input type="checkbox" id="option3"> <label for="option3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quasi deleniti, accusantium atque at commodi voluptatem omnis praesentium alias! Repudiandae pariatur commodi ipsa esse, sit beatae odit modi at quos.</label> </body> |
Jika sudah save dan jalankan dibrowsernya dan selesai, cukup mudah bukan? sekian tutorial tentang Cara Membuat Checkbox Lebih Menarik Menggunkan HTML5, samapi bertemu diartikel selanjutnya dan sampai jumpa, selamat mencoba .
Untuk melihat hasilnya klik DEMO
#KeepLearn
#IsmetMA