Как создать анимированную форму поиска
Нажмите на поле ввода:
[html]
<input type="text" name="search" placeholder="Поиск..">
<script>
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%;
}
<script>[/html]
Шаг 1) добавить HTML:
Код:
<input type="text" name="search" placeholder="Поиск....">
Шаг 2) добавить CSS:
Код:
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%;
}
- Подпись автора