Membuat Kotak Search Form Responsive bisa teman buat hanya dengan memanfaatkan HTML dan CSS saja, tanpa perlu menambahkan JavaScript. Dan kunci agar kotak search form bisa responsive adalah ada pada CSS width yang menggunakan persentase dan bukan angka seperi 100px atau semacamnya.
Dengan memasukkan ukuran width menggunakan persentase maka, lebar dari search form ini akan menyesuaika resolusi layar, jika Layar besar maka kotak search form juga akan besar, dan begitu juga sebaliknya.
Dan kali ini saya akan membagikan kode HTML dan juga CSS untuk membuat sebuah kotak search form yang responsive dan menarik.
Kode HTML
Kode CSS
Demo Kotak Search Form layar Lebar
Demo Kotak Search Form layar Kecil
Mudah bukan cara membuat kotak search form-nya ? yaps karena memang disini yang kita tambahkan adalah width: 100% untuk membuat kota search form tersebut mampu menyesuaikan berapun lebar layar.
Terima kasih
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar