Tutorial membuat search box dengan HTML CSS, lengkap penjelasan kode!

Pada kesempatan kali ini saya bakal membahas tutorial membuat search box/kotak pencarian dengan html dan css.

Tutorial ini sebenarnya sudah banyak web atau blog yang membahasnya.

Cuma saya mau membuat search box yang unik sekaligus kece dengan adanya animasi pada search boxnya.

Kira-kira tampilannya nanti akan seperti ini

Gimana baguskan search boxnya? 😁

Ok kita langsung ke tutorialnya

Cara/tutorial membuat search box dengan html css

1. Seperti biasa buat file html terlebih dahulu. Terserah dengan nama apapun boleh, kalau saya akan saya beri nama index.html

2. Kemudian ketik kode dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Search Bar with HTML CSS</title>
  
  <!-- Fontawesome CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  
  <div class="search-box">
    <input type="text" placeholder="type to search" />
    <div class="icon">
      <i class="fas fa-magnifying-glass"></i>
    </div>
  </div>
  
  <script src="main.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
</body>
</html>

3. Setelah itu buat lagi sebuah file tempatkan di direktori atau folder yang sama dengan file html tadi dengan nama style.css

4. Kemudian ketik lagi kode css dibawah ini


* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #3a6073;
}

.search-box {
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
  background: #ffffff;
  border-radius: 50px;
}

.search-box:hover {
  background: #1cbfc3;
}

.search-box input {
  outline: none;
  border: none;
  height: 30px;
  width: 0px;
  border-radius: 50px;
  background: #1cbfc3;
  color: #ffffff;
  transition: .6s;
  font-size: 15px;
}

.search-box ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .6);
}

.search-box:hover > input {
  width: 200px;
}

.search-box .icon {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #313131;
  font-size: 15px;
}

.search-box:hover > .icon {
  color: #ffffff;
}

5. Kemudian save/simpan dan jalankan file html tadi pada browser maka akan tampil seperti ini

gambar diatas merupakan animasi search box yang saya buat ketika mouse berada diatas icon search boxnya.

Selanjutnya saya akan jelaskan kode html cssnya. Semoga dapat dipahami 😊

Penjelasan Kode HTML

Pada file html di kode ini

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>

kode diatas merupakan elemen link yang digunakan untuk menampilkan icon search svg dari fontawesome secara online.

Dan untuk kode ini

<link rel="stylesheet" href="style.css">

Adalah elemen link yang menghubungkan file html dengan style.css yang akan menjadi style dari search boxnya nanti.

Lalu didalam elemen body terdapat elemen kode tag html seperti ini

<div class="search-box">
    <input type="text" placeholder="type to search" />
    <div class="icon">
      <i class="fas fa-magnifying-glass"></i>
    </div>
 </div>

<div class="search-box"> merupakan elemen pembungkus atau istilah lainnya yang menjadi elemen container dari search box yang akan dibuat.
<input type="text" placeholder="type to search"> merupakan kotak input yang memiliki 2 atribut yaitu type="text" untuk mengetikan teks dan placeholder="type to search" yaitu teks yang secara default muncul di kotak input.
<div class="icon"> merupakan elemen html pembungkus dari icon fontawesome yang kita gunakan.
<i class="fas fa-magnifying-glass"></i> merupakan kode pemanggil icon fontawesome dalan hal ini icon search.

terakhir untuk kode html yang ini

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>

digunakan untuk memanggil kode javascript dari icon fontawesome agar dapat menampilkan icon di browser.

Penjelasan Kode CSS

di awal kode css saya membuat reset margin dan padding untuk semua elemen html seperti dibawah ini

* {
  margin: 0;
  padding: 0;
}

selanjutnya pada pada tag <body> html saya mengatur agar elemen yang nantinya ada didalam elemen body akan berada ditengah dengan kode css seperti ini

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #3a6073;
}

kode display: flex; menandakan bahwa saya mau menggunakan css flex box dengan settingan justify-content: center; untuk menengahkan elemen search-box berada ditengah secara horizontal.

Dan align-items: center; untuk meletekan elemen search-berada ditengah secara vertical.

Tidak sampai disitu agar sempurna saya menambahkan kode untuk tinggi body agar sama dengan tinggi layar device yang kita gunakan dengan kode height: 100vh;

Kemudian dengan background: #3a6073; maka Latar belakang elemen body berwarna seperti berikut

#3a6073

Kemudian untuk pengaturan css pada class search-box nya yang seperti ini

.search-box {
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
  background: #ffffff;
  border-radius: 50px;
}

.search-box:hover {
  background: #1cbfc3;
}

saya masig menggunakan flex box untuk mengatur elemen didalamnya hanya saja saya mau kotak input dan icon fontawesomenya sejajar dengan mengatur justify-content ke space-evenly.

nah pada kode diatas yaitu .search-box:hover saya mau ketika diklik search-boxnya maka akan terjadi sesuatu yaitu background search box berubah warna seperti warna ini

#1cbfc3

Selanjutnya pada kotak inputnya css yang saya atur seperti ini

.search-box input {
  outline: none;
  border: none;
  height: 30px;
  width: 0px;
  border-radius: 50px;
  background: #1cbfc3;
  color: #ffffff;
  transition: .6s;
  font-size: 15px;
}

.search-box ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .6);
}

.search-box:hover > input {
  width: 200px;
}

.search-box input artinya saya mau membuat style untuk kotak input yang ada didalam elemen search-box.

Dengan kode:

Outline: none; artinya ketika kotak input diklik maka tidak ada garis luar yang muncul disekitar kotak input.
Border: none; artinya kotak input tidak memiliki border;
Height: 30px; artinya kotak input memiliki tinggi 30px;
Width: 0px; artinya kotak input memiliki lebar 0px;
border-radius: 50px; artinya kotak input mempunyai sisi tumpul sebesar 50px setiap sisinya.
background: #1cbfc3; artinya warna untuk kotak input saya buat sama dengan warna background search box.
Color: #ffffff; artinya teks pada kotak input berwarna putih.
Transition: .6s; artinya ketika ada kotak input mengalami perubahan maka perubahan tersebut akan terjadi selama 0.6 per detik.
Font-size: 15px; adalah ukuran dari teks pada kotak input.

.search-box ::-webkit-input-placeholder merupakan pseudo class untuk mengatur placeholder pada kotak input.

Pada kodingan ini

.search-box ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .6);
}

saya membuat warna teks placeholder pada kotak input berwarna putih dengan transparan warna 0,6.

Kemudian untuk membuat animasi ketika mause berada diatas elemen search-box maka akan terjadi sesuatu pada kotak input yaitu lebarnya akan berubah menjadi 200px.

Dapat dilihat pada kodingan css yang ini

.search-box:hover > input {
  width: 200px;
}

Terakhir untuk pengaturan css pada icon search/pencarian yaitu seperti ini

.search-box .icon {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #313131;
  font-size: 15px;
}

.search-box:hover > .icon {
  color: #ffffff;
}