• 1239
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Сегодня предлагаю вам 2 варианта поисковых форм, которые позволят сэкономить пространство на вашем сайте. При клике форма расширяется для ввода текста,это можете посмотреть в демо. Используется CSS3.
И так приступим
1.Открываем файл search.form.tpl он находится в папке с нашим шаблоном.
и меняем содержимое на вот это

Код:
<form method="post" action="{form_url}">
<input type="hidden" name="category" value="" />
<input type="hidden" name="postdate" value="" />
<input placeholder="Поиск" type="search" name="search" >
</form>
2.Сделаем перезапуск стилей для webkit браузеров, которые добавляют к поисковым input тегам рамочку, иконку закрытия. Уберем все это лишнее,добавим все это в наш файл стилей
Код:
input {outline: none;}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
3.Теперь добавим стилей нашей форме,на всех свойствах останавливаться не будем, просто отметим, что ширина поискового input вначале имеет значение 55px, и будет расширяться до 130px в момент фокуса :focus. Свойство transition позволяет анимировать это изменение ширины. Для свечения используется box-shadow:
Код:
input[type=search] {
background: #ededed url(search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;

-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;

-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;

-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
В демо 2 input поле поиска еще компактнее - отображаться будет только иконка. При клике по ней будет также происходить изменение ширины поля ввода.
Код:
#demo-b input[type=search] {
width: 18px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
А текст сделали прозрачным:
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
4.Вот исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Вот и все ,форма работает во всех современных браузерах Chrome, Firefox, Safari, и IE8+.

Можешь почитать и вот эту статейку " Веб-сервисы позволяющих создать кнопку online"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

----