Не понимаю, как и на чём реализовать данный функционал. Подскажите, пож-та, знающие!
На данный момент код выглядит так:
<form class="search">
<input placeholder="Поиск" type="text">
<button class="search__button">
</button>
</form>
<div class="city__list">
<select class="city__select">
<option value="sankt-peterburg">Санкт-Петербург</option>
<option value="moskva" selected>Москва</option>
<option value="ufa">Уфа</option>
<option value="volgograd">Волгоград</option>
<option value="voronesh">Воронеж</option>
<option value="kazan">Казань</option>
<option value="krasnodar">Краснодар</option>
<option value="krasnoarsk">Красноярск</option>
<option value="novosibirsk">Новосибирск</option>
<option value="nnovgorod">Нижний Новгород</option>
<option value="omsk">Омск</option>
<option value="perm">Пермь</option>
<option value="rostov">Ростов-на-Дону</option>
<option value="samara">Самара</option>
<option value="chelabinsk">Челябинск</option>
</select>
</div>
.search {
position: relative;
width: 220px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
border-radius: 20px;
}
.search input {
width: 100%;
height: 45px;
background: rgba(126, 43, 134, 0.10);
padding-left: 15px;
}
.search input::placeholder {
color: rgba(64, 64, 64, 0.30);
font-size: 12px;
}
.search__button {
display: flex;
height: 23px;
width: 23px;
position: absolute;
top: 13px;
right: 11px;
cursor: pointer;
}
.search__button::before {
content: url(../img/icon/search.svg);
position: absolute;
}
.city__select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
outline: none;
background-image: url("../img/icon/arrow-bottom.svg");
background-repeat: no-repeat;
background-color: #fff;
background-position: calc(100% - 0.15em) 0.60em;
width: 200px;
outline: none;
cursor: pointer;
}
.city__select option {
background-color: #fff;
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
padding: 5px;
}
Но чувствую, что иду куда-то не туда.
Текущий результат:
