Jak na to – animovaný vyhledávací formulář
Naučte se, jak vytvořit animovaný vyhledávací formulář pomocí CSS.
Jak vytvořit animovaný vyhledávací formulář
Klikněte na vstupní pole:
Krok 1) Přidejte HTML:
Příklad
<input type="text" name="search" placeholder="Search..">
Krok 2) Přidejte CSS:
Příklad
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%;
}
Tip: Další informace o formulářích HTML naleznete v našem výukovém programu pro formuláře HTML.
Přejděte do našeho výukového programu pro formuláře CSS , kde se dozvíte více o tom, jak stylovat formuláře HTML.