Это пример стильного расширяемого поля ввода, использующего только чистое решение CSS. Анимация и эффект расширяют поле ввода после нажатия на него. Разметка HTML проста и легка благодаря определению элемента input и span внутри элемента div, чтобы гарантировать, что анимированная граница не переполняется и не нарушает пользовательский интерфейс.
Далее, мы используем разметку freebee «grow-search», чтобы увеличить ширину поиска, пока он выбран. CSS в основном сосредоточен на поведении, пока он выбран или представлен, он завис.
Контур специально сделан не для ввода, пока он находится в выбранном состоянии. Важная часть этого фрагмента растет, что достигается увеличением ширины при выборе ввода. Вы получаете представление об использовании различных видов анимации и эффектов.
HTML
Код
<ul id="growing-search-freebie">
<li>
<!-- Start Freebie Markup -->
<div class="growing-search">
<div class="input">
<input type="text" name="search"/>
</div><!-- Space hack --><div class="submit">
<button type="submit" name="go_search">
<span class="fa fa-search"></span>
</button>
</div>
</div>
<!-- End Freebie Markup -->
</li>
</ul>
CSS
Код
.growing-search {
padding: 5px 5px 5px 7px;
border-radius: 5px;
background: #fff;
}
.growing-search div {
display: inline-block;
font-size: 12px;
}
.growing-search .input input {
margin-right: 0;
border: none;
font-size: inherit;
transition: width 200ms;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
width: 55px;
color: #aaa;
border-bottom: 1px solid #eee;
}
.growing-search .input input:focus {
width: 150px;
}
.growing-search .submit button {
margin-left: 0;
border: none;
font-size: 1.15em;
color: #aaa;
background-color: #fff;
padding-top: 2px;
padding-bottom: 2px;
transition: color 200ms;
}
.growing-search .input input:hover, .growing-search .submit button:hover {
cursor: pointer;
}
.growing-search .input input:focus, .growing-search .submit button:focus {
outline: none;
}
.growing-search .submit button:hover {
color: #3498db;
}
Вы можете изменить этот код, чтобы изменить стиль, цвет, и внешний вид границы.
Демонстрация
