Membuat Desain Custom Input (Checkbox + Radio Button) pada Form

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Desain Custom Input (Checkbox + Radio Button) pada Form"

Veronika Gunardi
7 tahun lalu
Tontonan:

Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja?

2 Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya biar kita bisa bikin tampilan customnya yang lebih unik.. Yuk disimak~ Salam jagocoding~ kembali ke dunia CSS lagi.. Kali ini saya akan membagikan salah satu teknik desain custom yang bisa diterapin untuk website kita, terutama di bagian Formnya.. Nah, tapi yang jadi fokus saya kali ini adalah di bagian Form checkbox sama radio button. Soalnya kedua obyek tersebut nggak begitu umum didesain dengan CSS. Untuk teknik ngedesain 2 obyek ini nggak bisa terlalu sembarangan, karena minimal kita harus cukup teliti dengan pixel-pixel yang akan sangat bervariasi tergantung kebutuhan kita. Langsung disimak aja deh~ Pertama-tama, kita bikin form dulu deh.. Boleh ikutin langsung format HTML dibawah ini nih,, <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>latihan CSS</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <form action=""> <fieldset> <legend>checkbox</legend> <input type="checkbox" name="check" id="txt" class="form-check"> <label for="txt">contoh Checkbox</label> <input type="checkbox" name="check" id="txt2" class="form-check"> <label for="txt2">contoh Checkbox</label> <input type="checkbox" name="check" id="txt3" class="form-check"> <label for="txt3">contoh Checkbox</label> </fieldset>

<fieldset> <legend>radio Button</legend> <input type="radio" class="form-radio" name="rd" id="rd1"> <label for="rd1">radio Satu</label> <input type="radio" class="form-radio" name="rd" id="rd2">

3 <fieldset> <legend>radio Button</legend> <input type="radio" class="form-radio" name="rd" id="rd1"> <label for="rd1">radio Satu</label> <input type="radio" class="form-radio" name="rd" id="rd2"> <label for="rd2">radio Dua</label> <input type="radio" class="form-radio" name="rd" id="rd3"> <label for="rd3">radio Tiga</label> </fieldset> </form> </body> </html> Nah, sampai sejauh ini tampilannya kurang lebih seperti ini : Gimana? Standar lah ya? Dari jaman cheetos masih 500 perak sampe sekarang sih umumnya ya gitu-gitu terus.. Wajar aja sih, soalnya checkbox dan radio button itu nggak bisa dikasi property CSS yg macem-macem.. Mau dikasi background, border, width, dsb mah nggak ada pengaruhnya.. Sekarang kita masuk ke teknik desain checkbox dulu nih.. Untuk mendesain custom checkbox, seenggaknya kita butuh pseudo-element ::before dan ::after pada obyek itu sendiri untuk ngelakuinnya. Sekarang kita ke CSSnya ya~ *{margin:0px auto;} body{ background:#fafafa;

4 font-size:16px; font-family:'lucida Sans', sans-serif;} form{padding:20px;} form label{ position:relative; cursor:pointer; line-height:30px; vertical-align: top;} /*MULAI MENDESAIN CUSTOM CHECKBOX DAN RADIO BUTTON*/ form.form-check{ position:relative; width:50px; height:25px;} form.form-check::before{ content:""; position:relative; width:50px; height:25px; background:#fff; border:1px solid #ddd; border-radius:30px; -moz-border-radius:30px;} Sampai disini dulu,, pertama-tama kita liat part Custom Checkbox paling bawah CSS diatas.. Penggunaan pseudo-element ::before maupun ::after pasti selalu diikuti property content.. Content bisa diisi dengan nilai karakter apapun, tapi kalau nggak butuh menampilkan karakter apapun ya dikosongin aja dengan petik petik.. Jadi di class form-check::before itu kita sedang membuat sebuah layer tambahan pada checkbox untuk menampilkan kotak putih yang agak bundar-bundar seperti ini

Selanjutnya kita buat bundaran untuk bagian dalam kotak putih di atas. Kalau tadi udah pake pseudo-element ::before, sekarang kita pakai ::after. form.

5 Selanjutnya kita buat bundaran untuk bagian dalam kotak putih di atas. Kalau tadi udah pake pseudo-element ::before, sekarang kita pakai ::after. form.form-check::after{ content:""; position:absolute; width:21px; height:21px; border-radius:25px; -moz-border-radius:25px; background:#eee; left:3px; top:3px; transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; -khtml-transition:0.3s;} Caranya nggak beda jauh dengan yang tadi,, btw untuk ukuran pixel-pixelnya itu nggak wajib ya.. Kalau kita mau bikin custom checkbox ukuran lebih besar atau kecil ya kita harus nyocok2in sendiri~ sedikit saya selipin transition biar nantinya si tombol bulat ini akan ada efek bergerak.. Sampai disini custom checkboxnya udah terbentuk, tapi belum berjalan semestinya.. Supaya bulatan di dalam (::after) itu bisa bergerak / pindah tempat ketika kita checkboxnya dalam keadaan terpilih, kita butuh bantuan pseudo-class lagi yg bernama :checked. Jadinya ya seperti ini : form.form-check:checked::after{ left:27px; background:#33aa55;} /*posisi leftnya dikira-kira aja sesuai kebutuhan~ warna background diubah ke warna yang berwarna sbg pertanda

6 checkbox tersebut aktif*/ Taraa,, si custom checkbox sekarang udah jadi deh.. Sekarang kita beralih ke radio button deh.. Untuk cara custom radio button, pseudo-element yang akan dipakai sih masih sama, tapi obyek manipulasinya bakalan sedikit beda dengan custom checkbox. Kalau di checkbox tadi, si input (.form-check) itu sendiri yang kita kasi pseudo-element ::before dan ::after, sedangkan hal itu nggak bisa kita lakukan di radio button.. Jadinya, untuk radio button ini, kita harus menyembunyikan radio button yg asli, dan membuat obyek baru di <label>. Yuk disimak~ form.form-radio{display:none;} form.form-radio + label{padding-left:35px;} form.form-radio + label::before{ content:""; position:absolute; left:0px; width:25px; height:25px; background:#fff; margin-right:5px; border:1px solid #ddd; border-radius:50%; -moz-border-radius:50%; box-shadow:2px 2px 2px #bbb; -moz-box-shadow:2px 2px 2px #bbb; transition:0.3s; -moz-transition:0.3s; -webkit-transition:0.3s; -khtml-transition:0.3s;} form.form-radio:checked + label::before{

background:#34a8bf; border:5px solid #fff; width:17px; height:17px;} Tekniknya dan konsepnya nggak beda jauh lah ya dengan checkbox tadi.. Yang bikin beda disini cuma ada selector tanda tambah (+).

7 background:#34a8bf; border:5px solid #fff; width:17px; height:17px;} Tekniknya dan konsepnya nggak beda jauh lah ya dengan checkbox tadi.. Yang bikin beda disini cuma ada selector tanda tambah (+). Selector tanda + itu biasanya digunakan untuk menunjuk ke elemen yang setingkat. Jadi.form-radio + label itu menunjuk ke label yang merupakan siblings (saudara setingkat / tetangga) dari si.form-radio gitu.. Sekarang keliatan perbedaannya ya.. Kalau di checkbox, obyek tombol barunya kita buat di checkbox itu sendiri (dengan bantuan ::before dan ::after), tapi untuk radio button obyek tombol barunya kita buat di label tetangganya radio button, sehingga objek.form-radio itu sendiri harus disembunyikan dengan display:none.. Udah gitu aja,, sekarang hasil akhirnya seperti ini deh~ Sekian tutorial dari saya.. Kalo penjabaran saya ada yg salah, atau ada yg tau cara lebih praktis lagi boleh dishare~ Biar kita sama-sama belajar gitu deh.. Terima kasih buat perhatiannya~

8 Tentang Penulis Christian Rosandhy

dokumen-dokumen yang mirip

Membuat Tabel Responsive dengan CSS

Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan