Коллеги, добрый день!
Как реализовать вот такой input search? Смотри фото.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВот вам готовая форма:
.search__form {
position: relative;
width: 100%;
}
.web__search {
display: block;
position: relative;
width: calc(100% - 120px);
height: 60px;
padding: 0 0 0 120px;
border: 2px solid #b4cfdb;
outline: none;
font-size: 20px;
color: gray;
}
.icon {
position: absolute;
top: 11px;
left: 15px;
width: 42px;
height: 42px;
fill: #53a6ca;
transform: scale(-1, 1);
}
.button {
cursor: pointer;
outline: none;
border: none;
position: absolute;
top: 8px;
right: 4px;
width: 160px;
height: 48px;
border-radius: 8px;
background: #53a6ca;
color: #fff;
font-size: 22px;
font-weight: normal;
font-family: monospace;
letter-spacing: 1px;
}
<div class="search__form">
<form action="" method="GET">
<input class="web__search" type="text" placeholder="Поиск" name="name" required-placeholder="">
<input class="button" type="submit" value="Поиск">
</form>
<svg class="icon" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</div>
div
, в него запихнутьimg
,input
иbutton
, а дальше экспериментировать