Home » How To » Cara Membuat Form Animasi Pencarian

Cara Membuat Form Animasi Pencarian

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat form animasi pencarian dengan CSS.

Cara Membuat Formulir Pencarian Animasi

Klik pada kolom input:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://dosenit.com/wp-content/uploads/2021/01/searchimage.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<p>Form Pencarian Animasi:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

<input type="text" name="search" placeholder="Search..">

Langkah 2) Tambahkan CSS:
Contoh

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

/* Saat field inputan mendapatkan fokus, ubah lebarnya menjadi 100% */
input[type=text]:focus {
  width: 100%;
}

You may also like