Bagaimana membuat: kotak pencarian animasi

Belajar bagaimana menggunakan CSS untuk membuat formulir pencarian animasi.

Klik field input:

Bagaimana membuat kotak pencarian animasi

Langkah pertama - Tambahkan HTML:

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

Langkah kedua - Tambahkan CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Saat input field mendapatkan fokus, ubah lebarnya menjadi 100% */
input[type=text]:focus {
  width: 100%;
}

Coba sendiri

Halaman yang berhubungan

Tutorial:Form HTML

Tutorial:Form CSS