Membuat Kotak Pencarian Sederhana dengan Tampilan Berwarna
Membuat Kotak Pencarian Sederhana dengan Tampilan Berwarna - Sedikit berbeda dengan beberapa kotak pencarian yang sudah pernah saya buatkan sebelumnya, kali ini kembali saya menawarkan kotak pencarian dengan bentuk sederhana namun berpenampilan menarik. Dikatakan menarik, karena walau kelihatannya biasa-biasa saja, tapi kotak pencarian yang akan saya buat tentu akan jauh lebih berwarna dari kotak pencarian biasa. Untuk memberikan sedikit sentuhan kecil, disini saya memoles kotak pencarian ketika di-fokus dan tombol 'cari' ketika di-hover. Dengan begitu, kotak pencarian terasa lebih hidup.
Untuk membentuk kotak pencarian seperti yang dimaksud, jelas kita membutuhkan struktur dasar sebagai kerangka awal.. yang kemudian kita sebut sebagai form. Setelah itu, barulah kita sertakan berkas CSS untuk mendekorasinya sesuai yang akan kita buat. Berikut keseluruhan berkas nya :
<form action="/search">Berkas di atas bisa anda salin ke bagian manapun di halaman situs anda. Mengenai ukuran (lebar maupun tinggi), warna, bentuk, teks, dan tata letak kotak pencarian.. masih bisa disesuaikan serta dikreasikan sesuai keinginan.
<input id="inputs" name="q" onwebkitspeechchange="StartSearch()" placeholder="Telusuri apapun yang ingin Anda cari disini..." type="text" x-webkit-grammar="builtin:search" x-webkit-speech="" />
<input id="nyari" type="submit" value="CARI" /></form>
<style>
#inputs{float:left;width:400px;border:2px solid #16a085;font-size:1.2em;font-weight:bold;padding:15px 20px;background-color:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:16px Philosopher,Arial,Sans-Serif;}
#inputs:focus{outline:none;border-color:#1abc9c;}
#nyari{float:left;margin-left:7px;margin-top:10px;padding:5px 10px;border:2px solid #16a085;font-size:1.2em;font-weight:bold;color:#95a5a6;background-color:transparent;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;cursor:pointer;font:16px Philosopher,Arial,Sans-Serif;}
#nyari:hover{color:#ecf0f1;background-color:#16a085;border-color:#16a085;}
</style>
Satu hal yang selalu saya sertakan pada kotak pencarian adalah fitur Search by Voice. Tetapi jika tidak ingin menggunakan fitur tersebut, anda boleh menghapus kode x-webkit pada berkas.
Beberapa demonstrasi nya sudah saya siapkan di bawah ini. Sengaja saya sajikan dalam tiga warna yang berbeda, supaya kemudian anda mendapatkan gambaran yang jelas mengenai kotak pencarian ini.
0 komentar:
Posting Komentar