Раскрывающееся поле поиска для сайта на CSS3

Pirat 15.10.2018 Статьи 0 комментариев

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

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

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

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome Searchbox</title>
<body>
<div class="search-box">
<input type="text" name="search" placeholder="Type here to search" class="search-text" />
<a href="#" class="search-btn">
  <i class="fa fa-search"></i>
</a>
</div>
</body>
</head>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  background: #e74c3c;
}
.search-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #34495e;
  border-radius: 40px;
  height: 40px;
  padding: 10px;
}

.search-btn {
  color: #e74c3c;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box:hover > .search-text {
  width: 240px;
  transition: 0.8s;
}

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

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

[center][/center]