Cara Membuat Search Form Responsive | RMC-Network

Cara Membuat Search Form Responsive | RMC-Network - Hallo sahabat RMC-Network, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Search Form Responsive | RMC-Network , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. selamat membaca.

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.

Demikianlah Artikel Cara Membuat Search Form Responsive | RMC-Network kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.