4126
- 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>Код:
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+.
Можешь почитать и вот эту статейку "Выдергиваем картинку из полной новости в короткую."
Это тоже интересно
17.11.13Адаптивная верстка
25.03.14 Много-уровневое адаптивное меню
08.06.15Отзывчивые вкладки,табы
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
