Cara Membuat Expand Search dengan HTML dan CSS, Seperti Apa?

Website pada umumnya memerlukan kotak pencarian agar memudahkan pengunjung mencari apa yang mereka inginkan. Cara membuat expand search dengan HTML dan CSS ternyata cukup mudah, dengan menggabungkan kode anda bisa mengkustomisasi kode kotak pencarian yang sesuai dengan kebutuhan anda.

Berikut caranya:

<form>

<input type="text" class="searchbox" autocomplete="off" placeholder="Silahkan Mencari...">

</form>

Anda perlu menggunakan form input untuk memasukkan data sehingga kotak pencarian dapat membaca data yang anda masukkan.

form{

margin:0;

padding: 0;

top:50%;

left: 50%;

position: absolute;

transform: translate(-50%, -50%);

}

.searchbox{

color: #575757;

position: relative;

transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s;

height: 60px;

width: 0;

margin:0;

padding: 5px 0 10px 50px;

box-sizing: border-box;

font-size: 20px;

cursor: pointer;

border:none;

border-radius: 30px;

background: url(icons-search.png) no-repeat left 15px center transparent;

background-size: 30px;

}

.searchbox:focus{

z-index: 3;

width: 400px;

border:2px solid #e25230;

background: #feffef;

outline: none;

cursor: auto;

padding-right: 10px;

}

Untuk icon pencarian, anda bisa mengubahnya sesuka hati. Disarankan, anda mengetikkan kode diatas agar anda dapat belajar cara membuat expand search dengan HTML dan CSS. CSS, juga mempercantik tampilan elemen pada form pencarian. Sehingga CSS menjadi faktor penting agar tampilan kotak pencarian terlihat lebih cantik dan rapi.

form {

width:500px;

margin:50px auto;

}

Skrip diatas memiliki fungsi untuk mengatur browser bagaimana lebar form yang anda gunakan menjadi 500px serta margin bawah dan atasnya dengan lebar 50px.

.search {

padding:8px 15px;

background:rgba(50, 50, 50, 0.2);

border:0px solid #dbdbdb;

}

Style kotak pencarian ini, memiliki class.search dimana anda telah menentukan padding bagian atas serta bawah dan kanan kirinya. Selain itu, anda juga bisa menentukan warna kotak pencarian dengan pallete yang tersedia dengan berbagai kode warna yang bisa anda cari di internet.

.button {

position:relative;

padding:6px 15px;

left:-8px;

border:2px solid #53bd84;

background-color:#53bd84;

color:#fafafa;

}

Skrip tersebut, merupakan kode untuk tombol pencarian. Position – relative , berguna untuk menempatkan tombol di kotak pencarian dengan jarak margin beberapa pixel antar elemen lainnya. Jika tombol ingin berada di tengah, maka anda perlu mengaturnya pada posisi yang relative.

Left -8px, merupakan elemen dimana posisi relative menggeser ke arah kiri dengan memberi posisi negative. Padding: 6px 15px di bagian atas atau bawah menjadi tombol lebar dimana anda bisa mengaturnya sama seperti form.

.button:hover  {

background-color:#fafafa;

color:#207cca;

}

Button hover, difungsikan untuk mengatur warna tombol kotak pencarian saat dilakukan pemrosesan. Hal ini, berguna agar website anda terlihat menarik dengan kotak pencarian yang berbeda pada umumnya.

Membuat Expand Search dengan Placeholder yang Berbeda

Placeholder dalam kontak pencarian, bisa anda ubah sesuai kebutuhan. Namun, hal ini akan sedikit rumit karena terkadang browser yang anda gunakan akan berbeda. Untuk itu, perubahan pada elemen butuh pengaturan dimana masing-masing browser memerlukan kode yang berbeda.

Berikut cara mengubah warna pada placeholder dengan warna merah dengan mengaturnya pada font Helvetica Neue:

<!doctype html>

<html lang="en"> 
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<style type="text/css">
form {

Selain skrip diatas, ada juga skrip di bawah ini yang bisa anda coba untuk membuat kotak pencarian dengan mudah :

<!doctype html>




<html lang="en">

<head>

<meta charset="utf-8">

<title>Judul Halaman Saya</title>

<style type="text/css">

form {

width:500px;

margin:50px auto;

}

.search {

padding:8px 15px;

background:rgba(50, 50, 50, 0.2);

border:0px solid #dbdbdb;

}

.button {

position:relative;

padding:6px 15px;

left:-8px;

border:2px solid #53bd84;

background-color:#53bd84;

color:#fafafa;

}

.button:hover  {

background-color:#fafafa;

color:#207cca;

}




::-webkit-input-placeholder { /* For WebKit browsers */

color:    #dd3333;

font-family:Helvetica Neue;

font-weight:bold;

}

:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */

color:    #dd3333;

font-family:Helvetica Neue;

font-weight:bold;

}

::-moz-placeholder { /* For Mozilla Firefox 19+ */

color:    #dd3333;

font-family:Helvetica Neue;

font-weight:bold;

}

:-ms-input-placeholder { /* For Internet Explorer 10+ */

color:    #dd3333;

font-family:Helvetica Neue;

font-weight:bold;

}

</style>

</head>

<body>

<form>

<input class="search" type="text" placeholder="Cari..." required>

<input class="button" type="button" value="Cari">

</form>

</body>

</html>

Skrip tersebut, hanya bisa digunakan pada browser terbaru. Jika anda menggunakan browser lama maka anda perlu menambahkan pengaturan sendiri pada CSS dalam kotak pencarian agar semua kode CSS bisa digunakan di semua browser.

Cara Membuat Expand Search dengan HTML dan CSS Agar Responsive

Website responsive saat ini, diperlukan agar tampilannya dapat menyesuaikan monitor, smartphone bahkan tablet sekalipun. Keuntungan website responsive, akan membuat pengunjung betah dan berlama-lama dalam website anda. Salah satunya, adalah kotak pencarian yang berguna untuk mencari apa yang diinginkan pengunjung.

Menggunakan framework seperti Bootstrap, menjadikan kotak pencarian bahkan website anda terlihat responsive dan dapat menyesuaikan keadaan layar. Teknik yang digunakan, adalah relative units dimana konsep ini mementingkan proporsionalitas dan fluiditas. Halaman web perlu disesuaikan agar saat layar berganti halaman website juga mengikuti.

.container {

width: 1000px;

min-height: 200px;

}

 

Skrip tersebut, merupakan salah satu elemen yang digunakan agar website terlihat responsive. Dengan mengubah satuan PX pada kotak pencarian maupun website, maka width elemen div tersebut bisa disesuaikan dengan viewport yang ada.

.container {

width: 100%;

min-height: 200px;

}

 

Penyesuaian tersebut, bisa anda terapkan di berbagai elemen pada website termasuk kotak pencarian, footer, maupun sidebar dan header. Disisi lain, ada juga typography units yang diperlukan untuk membuat kotak pencarian yang responsif menggunakan satuan pada vw, rem, em dan vh.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Basic Resposive</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.container h1 {

font-size: 8vw;

}

</style>

</head>

<body>

<div class="container">

<h1>Dummy Text</h1>

<p>Lorem Ipsum

versi Lorem Ipsum.</p>

</div>

</body>

</html>

 

Kode diatas, merupakan ukuran font element <H1> yang memiliki class .container menggunakan satuan vw. Dengan itu, ketika anda mencoba dalam mengubah ukuran kotak pencarian maupun website maka viewport dan ukuran font tersebut bisa anda sesuaikan dengan mudah.

Menentukan Viewport yang Tepat

Viewport ini, menjadi area dimana pengunjung melihat website anda dengan komputer, tablet maupun smartphone. Dengan viewport, anda bisa mengaturnya pada tag <meta> yang anda sisipkan pada header section berkas file HTML.

<meta name="viewport" content="width=device-width, initial-scale=1">

Penggunaan viewport ini, akan memudahkan pengunjung website untuk melihat konten-konten anda serta mencari konten yang diinginkan. Cara membuat expand search dengan HTML dan CSS diatas semoga memudahkan anda membuat website dengan kotak pencarian yang responsif dan stabil serta loading yang lebih cepat.

Leave a Comment