Простая панель для поиска внутри сайта, что выполнена в ярком оттенке по своему дизайну. Который можно увидеть на различных интернет ресурсах, только если его настроить по той палитре оттенка, что соответствует основному стилю. Просматривая сайты, то вероятно вы замечаете слишком много причудливых дизайн, которые создан под функцию поиска.
Здесь вашему вниманию элегантный синий фон и белая кнопка, что отвечает за клик по поиску по тому тексту, что изначально был написан, где можно поставить текст подсказки по умолчанию, что позволяют пользователям легко и напрямую реализовать функцию поиска.
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%);
}
Также нужно подключить шрифтовые иконки, которые выводят одно значение отвечающее за поиск.
Демонстрация
