Форма поиска - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Представляю вашему вниманию рабочие коды на скрипт форма поиска который можно поставить в верх сайта или как по другому сказать, шапка ресурса.

Что в нем хорошего, то что он прост и будет искать быстро. Вам только нужно грамотно поставить код там где вы желаете видеть этот поиск и на его подобрать стили, которые будут представлены ниже.

Сам код я проверял, и он отлично работает. Но основная гамма цвета идет под светлый шаблон сайта. Но что нужно прописать в CSS там можно спокойно поменять оттенок цвета, на тот который вам нужен.

Код
<div class="search">  
<form onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/">  
<input id="text" type="text" name="q" required placeholder="Что ищем?..." maxlength="70" size="20" />  
<input id="submit" type="submit" name="sfSbm" value=" " />  
</form>  
</div>


В CSS:

Код
/* Поиск search */
.search {
  // float: left;
  width: 220px;
  height: 35px;
  border: 2px solid #b4b2b2;
  border-radius: 5px;
  background: #f6f6f6;
  -wibkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: 1px 1px 8px rgba(243, 239, 43, .7), 0 0 8px rgba(243, 239, 43, .7);
}
#submit {
  width: 24px;
  height: 30px;
  background: url('http://kamorka.ucoz.com/header/top_menu_search.png') center left no-repeat;
  cursor: pointer;
  border: 0;
  margin-left: 3px;
  transition: all 0.9s ease;
}
#submit:hover {
  transform: rotate(360deg);
  transition: all 0.9s ease;
}
#text {
  height: 27px;
  border: none;
  padding-left: 10px;
}



Важно!

При копировании материала указывать ссылку на источник.

- 578
- 26-Ноября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта