• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать панель простого поиска по сайту (Поиск элементов с помощью простого поиска на сайте)
Создать панель простого поиска по сайту
Kosten
Дата: Суббота, 2019-02-23, 23:11 | Сообщение 1
Администраторы
Сообщений:20282
Награды: 56


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

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



HTML

Код
<div class="navidgedas">
   <div class="dgtedsazxin">
      <input type="text" class="desanzax-sanerugsam" placeholder="Что вы ищете?">
      <button type="submit" class="zadavetu-nadkilopas">
        <i class="fa fa-search"></i>
     </button>
   </div>
</div>


CSS

Код
.dgtedsazxin {
  width: 100%;
  position: relative
}

.desanzax-sanerugsam {
    float: left;
    width: 100%;
    border: 3px solid #108190;
    padding: 5px;
    height: 20px;
    border-radius: 5px;
    outline: none;
    color: #7b8681;
}

.desanzax-sanerugsam:focus{
  color: #0eaec3;
}

.zadavetu-nadkilopas {
    position: absolute;
    right: -50px;
    width: 41px;
    height: 36px;
    border: 1px solid #0d607d;
    background: #0f7b9c;
    text-align: center;
    color: #dcdcdc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}

.navidgedas{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


Также нужно подключить шрифтовые иконки, которые выводят одно значение отвечающее за поиск.

Демонстрация
Прикрепления: 1570063.png(3.4 Kb) · simple-search-b.zip(1.9 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать панель простого поиска по сайту (Поиск элементов с помощью простого поиска на сайте)
  • Страница 1 из 1
  • 1
Поиск: