Hoe OM - Geanimeerde Soekvorm
Leer hoe om 'n geanimeerde soekvorm met CSS te skep.
Hoe om 'n geanimeerde soekvorm te skep
Klik op die invoerveld:
Stap 1) Voeg HTML by:
Voorbeeld
<input type="text" name="search" placeholder="Search..">
Stap 2) Voeg CSS by:
Voorbeeld
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%;
}
Wenk: Gaan na ons HTML-vormhandleiding om meer oor HTML-vorms te wete te kom.
Gaan na ons CSS-vorms-tutoriaal om meer te wete te kom oor hoe om HTML-vorms te styl.