Advertisement here

Cara Membuat Search Form Responsive

Rangga
9 Apr, 2014
7
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.
Next Post Previous Post
7 Comments
  • Unknown
    Unknown September 18, 2014 at 2:34 AM

    Trims ya gan...
    sangat mmbantu bngt artikelnya.
    smg ilmunya bertambah

    Reply
  • Unknown
    Unknown February 9, 2015 at 4:37 AM

    thx gan atas sharenya cukup membantu sebagai seorang newbie seperti saya dan sudah saya terapkan di blog cupuku ijin nampang mas

    • Unknown
      Unknown February 9, 2015 at 4:38 AM

      maaf blogwalking http://gudangresepminuman.blogspot.com

    Reply
  • Unknown
    Unknown February 27, 2015 at 9:33 PM

    trimakasih infonya gan sangat membantu

    http://sehatbujur.blogspot.com/

    Reply
  • Unknown
    Unknown January 14, 2017 at 3:58 PM

    This comment has been removed by a blog administrator.

    Reply
  • Anonymous
    Anonymous July 12, 2017 at 12:32 AM

    wow keren gan super responsif, ini hasil akhirnya http://www.trixgadget.com

    Reply
  • Violet Eversteigh
    Violet Eversteigh July 16, 2019 at 6:29 PM

    Tutorialnya sangat bermanfaat sekali. Terima kasih ya kak. Salam kenal.

    - Catering Jakarta

    Reply
Add Comment
comment url
Related Post