Membuat sebuah Search form adalah hal sederhana yang mungkin orang-orang yang mengenal HTML dan CSS bisa membuatnya. Namun kali ini saya ingin berbagi pengalaman dalam membuat search form yang responsive. Dalam membuat search form ini, kita perlu menggunakan property dari CSS yaitu "position".
Jika masih bingung dalam penggunaan property position, teman-teman bisa melihat referensi langsung nya dari w3schools.
Langsung saja berikut code untuk membuat search form responsive:
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
}
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
}
Sign up here with your email