Сегодня предлагаю вам 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>Код:
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 */
}Код:
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);
}Код:
#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;
}Вот и все ,форма работает во всех современных браузерах Chrome, Firefox, Safari, и IE8+. 564585858
Можешь почитать и вот эту статейку "Выбор серии или канала для просмотра"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
