Pernahkan Anda melihat komponen input dengan tipe Radio standard yang di sajikan oleh HTML ? Betapa tidak enaknya dipandang mata bukan ? Maka sekarang kita akan coba memberikan sentuhan sederhana kita agar tampilan input dengan tipe Radio ini lebih nyaman untuk dilihat mata.
Pertama, kita akan coba buat elemen HTML radio kita dan coba saja kita lihat apa yang ditampilkan oleh browser kita apabila tidak ada satupun style yang berada disana, berikut potongan kode HTML nya :
Dengan kode tersebut, akan menghasilkan tampilan seperti berikut :
Bila Anda kesulitan memahami kode HTML tersebut Anda mungkin perlu membaca tulisan ini dahulu Perjalanan Menjadi Frontend Developer Bagi Pemula – Seri 1 – Mengenal HTML.
Untuk memberikan sentuhan baru pada komponen ini, maka kita perlu menambahkan beberapa rule CSS kepada potongan kode HTML tersebut. Namun karena kita kan banyak mengulang kata-kata class utama yang akan kita beri style jadi saya memilih menggunakan pre-processor SASS agar membantu memudahkan dalam menulis style tersebut, bila Anda belum tau apa itu SASS silahkan baca dulu artikel berikut Mengenal dan Belajar SASS Sebagai CSS Pre-Processor.
Langsung saja, saya telah membuat gist untuk kode SASS yang akan memberikan style pada elemen HTML kita diatas. Silahkan dibaca, dipelajari dan dimodifikasi seenak Anda sesuai dengan kebutuhan masing-masing. Anda bisa temui kodenya seperti berikut :
Tampilan dari kode diatas akan menghasilkan tampilan yang kurang lebih seperti gambar berikut :
Pada intinya kita memanipulasi psedo element :before dan :after dari label input Radio tersebut dan menggantinya dengan border solid 1px yang ditambah border radius 50% agar menjadi lingkaran, kita juga menambahkan state di psedo class :checked untuk membedakan ketika radio tersebut sedang dalam keadaan terpilih dan tidak.
Selamat belajar ya, bila Anda pemula dan susah memahami beberapa istilah yang saya sebutkan diatas Anda mungkin perlu membaca tulisan ini terlebih dahulu Perjalanan Menjadi Frontend Developer Bagi Pemula – Seri 2 – Mengenal CSS.
Anda juga bisa melihat live preview dari pekerjaan tersebut disini.
Telah di posting juga di medium saya disini.
Download Ebook Programming disini
Terima kasih,
Ditulis sesaat sebelum pulang kerja oleh Irfan Maulana