• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Делаем выезжающее CSS форму поиска сайта (Как сделать поле поиска по наведении клика выезжающем в CSS)
Делаем выезжающее CSS форму поиска сайта
Kosten
Дата: Среда, 2020-07-22, 20:12 | Сообщение 1
Онлайн
Администраторы
Сообщений:29297
Награды: 62


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

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

При открытие:



При наведении клика:



Установка:

HTML

Код
<div class="poiskovaya-sistema">
<input type="text" name="search" placeholder="Введите здесь для поиска" class="tekstovoye" />
<a href="#" class="poisk-klusa">
  <i class="fa fa-search"></i>
</a>
</div>

CSS

Код
.poiskovaya-sistema {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2e4a65;
  border-radius: 38px;
  height: 41px;
  padding: 10px;
}

.poisk-klusa {
    color: #ffe3e0;
    float: right;
    width: 38px;
    height: 41px;
    border-radius: 50%;
    background: #364a5f;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.poiskovaya-sistema:hover > .tekstovoye {
  width: 238px;
  transition: 0.7s;
}

.poiskovaya-sistema:hover > .search-btn {
  background: white;
}

.tekstovoye {
  border: none;
  background: none;
  outline: none;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}

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

Демонстрация
Прикрепления: 6120728.png(3.1 Kb) · 5857354.png(5.2 Kb) · opening-field.zip(2.8 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2020-07-22, 20:19 | Сообщение 2
Онлайн
Администраторы
Сообщений:29297
Награды: 62


Также рекомендую посмотреть аналогичную функцию, как раскрывающееся поле поиска для сайта в CSS, которая по своей функциональности схожа, только по дизайну совершенно по другому создана.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Делаем выезжающее CSS форму поиска сайта (Как сделать поле поиска по наведении клика выезжающем в CSS)
  • Страница 1 из 1
  • 1
Поиск: