Memberi style CSS sederhana pada Radio Button

Memberi style CSS sederhana pada Radio Button

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 :

https://gist.github.com/mazipan/064088c71371de3ed8e7150e611b0b1b

Dengan kode tersebut, akan menghasilkan tampilan seperti berikut :

Radio Button Standard

Radio Button Standard

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 :

https://gist.github.com/mazipan/b13a1add0b1983c6357092e360ed8f5f#file-simple-styling-radios-scss

Tampilan dari kode diatas akan menghasilkan tampilan yang kurang lebih seperti gambar berikut :

Radio Button Setelah diberi CSS

Radio Button Setelah diberi CSS

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

 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.