Cara Membuat Kotak Search Form Responsive

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

<form class="searchform">
<input type="text" name="s">
<input type="submit" value="Search" title="Search Button">
</form>

Kode CSS

.searchform{
position:relative
}
.searchform input[type="text"]{
background: #EBEBEB;
height: auto;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom: 0;
padding: 7px;
border: none;
float: left;
color: #5F5F5F;
width: 100%;
height: 34px;
float: none;
padding-right: 70px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="submit"]{
background: #6B6B6B;
border: none;
padding: 7px;
color: #fff;
height: 34px;
position: absolute;
bottom: 0;
right: 0;
margin:0
}

Demo Kotak Search Form layar Lebar

Demo Kotak Search Form layar Lebar

Demo Kotak Search Form layar Kecil

Demo Kotak Search Form layar Kecil

Mudah bukan cara membuat kotak search form-nya ? yap karena memang disini yang kita tambahkan adalah width: 100% untuk membuat kota search form tersebut mampu menyesuaikan berapun lebar layar.