Search Box Dengan Style Css Yang Elegant

Pada hari ini taukahbahwa.blogspot.com akan menyajikan artikel tentang Search Box Dengan Style Css Yang Elegant. Semoga dengan posting Search Box Dengan Style Css Yang Elegant akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com

Dilihat dari sistem kerja search box ini mungkin tidak sebaik custom search dari google yang bisa menampilkan pencarian keyword yang lebih baik, tapi sayangnya custom search dari google menurut saya loadingnya terlalu berat sehingga mempengaruhi loading blog, sebagai alternatif bisa menggunakan search box dengan style css dengan perintah html yang lebih sederhana.

Dengan tampilan yang sederhana tapi elegant, style dari search box ini dibuat oleh Rethnaraj Rambabu, yang diadaptasi dari search box milik Apple dengan background warna gelap, karena menurut saya tampilannya yang simple nan elegant saya mencoba merubah search box tersebut dari berbagai warna background seperti terlihat digambar diatas, atau bisa langsung melihat hasilnya seperti apa, kalian bisa melihatnya melalui link Demo.

1. Search Box Warna Background Hijau
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9NgXzfrPWtS6p2t6vzttjzuEHJA0huTUInDM6ZJsM_UlaH9cOvJD-6FhvarZJFslL1EDh3nocE-2CvGLwoYFW2iRpDhh5BOyxO7iE1lM3oS0uBcMRWDhDRwXPizGqXF0gS9DdQc50AE/s1600/cari.png) no-repeat 10px 6px #506D2C;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

2. Search Box Warna Background Biru
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9NgXzfrPWtS6p2t6vzttjzuEHJA0huTUInDM6ZJsM_UlaH9cOvJD-6FhvarZJFslL1EDh3nocE-2CvGLwoYFW2iRpDhh5BOyxO7iE1lM3oS0uBcMRWDhDRwXPizGqXF0gS9DdQc50AE/s1600/cari.png) no-repeat 10px 6px #37627B;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

3. Search Box Warna Background Orange
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9NgXzfrPWtS6p2t6vzttjzuEHJA0huTUInDM6ZJsM_UlaH9cOvJD-6FhvarZJFslL1EDh3nocE-2CvGLwoYFW2iRpDhh5BOyxO7iE1lM3oS0uBcMRWDhDRwXPizGqXF0gS9DdQc50AE/s1600/cari.png) no-repeat 10px 6px #BF6E18;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

4. Search Box Warna Background Hitam
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9NgXzfrPWtS6p2t6vzttjzuEHJA0huTUInDM6ZJsM_UlaH9cOvJD-6FhvarZJFslL1EDh3nocE-2CvGLwoYFW2iRpDhh5BOyxO7iE1lM3oS0uBcMRWDhDRwXPizGqXF0gS9DdQc50AE/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

HTML

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Jika tidak ada yang sesuai dengan background template yang kalian pergunakan, kalian bisa modifikasi pada bagian background search input dengan mengganti warnanya, jika kesulitan mencari warna yang cocok, bisa menggunakan tools warna pada bagian menu.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com