Загружаемся...
Изменение размера поля поиска при клике - Скрипты, шаблоны, помощь


Меню сайта
Шаблоны uCoz Скрипты uCoz Скрипты php uCoz Шаблоны форума uCoz Авторство we6.ucoz
Форум
Наш опрос
Оцените мой сайт
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пользователи
Гости сайта

Кто on-line? Сегодня нас посетили

Система Orphus
Реклама

 Изменение размера поля поиска при клике
Просмотров: 185        Добавлен: 28.04.2014, 15:29        Теги: размера, клике, при, изменение, поиска, поля       

С название материала все сразу становится понятно. В данной статье будет показано, как сделать растягивание поля поиска при клике на него. Вариант очень удобен, так как не требует javascript, jquery. То, что мы не будем их использовать это уменьшает нагрузку на наш сайт. В месте где хотим видеть форму поиска вставляем:

Код
<div class="search_block"> 
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/"> 
<input type="text" name="q" required placeholder="Поиск..." maxlength="70" size="20" /> 
<input type="submit" name="sfSbm" value="" /> 
</form> 
</div>

И в файл со стилями css добавляем:

Код
.search_block *{margin:0;padding:0;} .search_block{position:relative;width:263px;display: inline-block;} .search_block input[type="text"]{-moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;border-radius: 3px;padding: 6px 6px;display:inline-block;width: 110px;height:16px;outline:0;float:right;border: 1px solid #9e624d;} .search_block input[type="text"]:focus{width: 220px;box-shadow:0 0 6px #07a4d1 ;border:1px solid #1cacd6;} .search_block input[type="submit"]{border-radius:3px;outline:none;right: 6px;top:5px;float:right;position:absolute;width:20px;height:20px;border:0;background: url('http://we6.ucoz.com/img_script/poisk/Search-Find.png') center center no-repeat;}

 



   Ссылка на источник: нету:(
Комментарии: 0


Оставлять комментарии могут только зарегистрированные пользователи!