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%; }