ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простая форма поиска для сайта на CSS

Простая форма поиска для сайта на CSS

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

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

Так примерно смотрится на светло желтом фоне.

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

HTML

Код

CSS

Код

.vegukonem-nenkaepren{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.vedanageous{
  position: relative;
  padding: 20px 49px;
}

.input{
  width: 395px;
  border: 2px solid #fff;
  background: transparent;
  padding: 16px 28px;
  border-radius: 100px;
  outline: none;
  font-size: 20px;
  color: #eaeaea;
}

::-webkit-input-placeholder {
  color: #eaeaea;
  font-family: Roboto;
  text-transform: uppercase;
}
::-moz-placeholder {
  color: #eaeaea;
}
:-ms-input-placeholder {
  color: #eaeaea;
}

.kopaverage-dapodcas {
  position: absolute;
  top: 21px;
  right: 49px;
  cursor: pointer;
  color: #1c859e;
  background: #eaeaea;
  border: 0px;
  width: 118px;
  height: 57px;
  border-radius: 100px;
  outline: none;
  text-transform: uppercase;
  font-weight: bold;
}

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

Демонстрация

20 Ноября 2018 Просмотров: 2333 Комментариев: (0)

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

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

Kosten

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