Cara Membuat Search Form Responsive

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
}

Silahkan anda coba kecilkan layar browser anda atau coba buka website anda dengan smartphone/tablet.
Sekian artikel belajar css tentang membuat search form responsive, silahkan dicoba dan semoga bermanfaat.

BAGIKAN HALAMAN INI DI :