Сегодня предлагаю вам 2 варианта поисковых форм, которые позволят сэкономить пространство на вашем сайте. При клике форма расширяется для ввода текста,это можете посмотреть в демо. Используется CSS3. И так приступим 1.Открываем файл search.form.tpl он находится в папке с нашим шаблоном. и меняем содержимое на вот это
2.Сделаем перезапуск стилей для webkit браузеров, которые добавляют к поисковым input тегам рамочку, иконку закрытия. Уберем все это лишнее,добавим все это в наш файл стилей
3.Теперь добавим стилей нашей форме,на всех свойствах останавливаться не будем, просто отметим, что ширина поискового input вначале имеет значение 55px, и будет расширяться до 130px в момент фокуса :focus. Свойство transition позволяет анимировать это изменение ширины. Для свечения используется box-shadow:
4.Вот исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Вот и все ,форма работает во всех современных браузерах Chrome, Firefox, Safari, и IE8+.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим
именем.