» »

Форма поиска для сайта в темном виде

Форма поиска для сайта в темном виде

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

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

Вероятно вы уже встречались с такой ситуацией, это когда сталкиваетесь с относительно сложными сайтами, то автоматически ищут окно поиска, для того, чтобы добраться до конечного пункта назначения.

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

Поиск по сайту

Приступаем к установке:

HTML

Код
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
<img src="http://zornet.ru/ABVUN/Abas/degakolas/Pesan.png" id="bana-branes-gesponsed"/>
<input id="mentioned-kinalesan-vourable" type="text" name="q" maxlength="30" placeholder=" Поиск по каталогам сайта.."/>
<input id="bleavem-gakopion-paban" type="submit" value="Найти" />
<input type="hidden" name="m" value="load" />
</form>

CSS

Код
#mentioned-kinalesan-vourable {
  font-size: 13px;
  height: 25px;
  width: 437px;
  border-radius: 3px 0 0 3px;
  margin-left: 41px;
  border: 2px solid #7b7b7b;
  background: rgba(19, 18, 18, 0.82);
  padding-right: 3px;
}

#bleavem-gakopion-paban {
  background: #2d2c2c;
  border-radius: 0 5px 5px 0;
  height: 32px;
  margin-left: 0px;
  border-style: solid solid solid none;
  border-width: 1px;
  border-color: #6b6a6a;
  color: #dcdcdc;
  border: 2px solid #676363;;
}

#bleavem-gakopion-paban:hover{
background: #161616;
border-color: #282828;
cursor: pointer;
  border: 2px solid #383636;
}

#bana-branes-gesponsed {
  padding: 3px 0 0 12px;
  position: absolute;
  width: 25x;
  height: 25px;
}

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

Демонстрация
2019-01-29 Просмотров: 306 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar