Nasıl Yapılır - Animasyonlu Arama Formu
CSS ile hareketli bir arama formunun nasıl oluşturulacağını öğrenin.
Animasyonlu Arama Formu Nasıl Oluşturulur
Giriş alanına tıklayın:
Adım 1) HTML'yi ekleyin:
Örnek
<input type="text" name="search" placeholder="Search..">
Adım 2) CSS'yi ekleyin:
Örnek
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
İpucu: HTML Formları hakkında daha fazla bilgi edinmek için HTML Form Eğitimimize gidin .
HTML Formlarına nasıl stil uygulanacağı hakkında daha fazla bilgi edinmek için CSS Formları Eğitimimize gidin .