Учусь верстать сайт и тут возник такой блок с input'ами, может кто то знает как его сделать?

Question

[Ulug]

Comments

[Moskus]

Конечно, "кто-то" знает.
https://www.google.com/search?client=firefox-b-1-d...

[Сергей delphinpro]

Расположить блоки в одну линию, что может быть проще?

<div class="form">
  <input>
  <input>
  <input>
  <input>
</div>
.form {  display: flex; }
.form input { margin-right: 10px; }

Answer 1

[Адам Сулумов]

<input class="input" type="text" placeholder="Введите что-нить">

.input {
padding-right: 10px  40px 10x 10px;
position: relative;
}
.input:after {
content: "";
position: absolute;
right: 0;
top: 0;
display: inline-block;
width: 20px;
height: 20px;
background-image: url("ССЫЛКА НА КАРТИКУ");
background-size: cover;
}

Comments

[Адам Сулумов]

:K Yaha, так нельзя? Не помню просто. Тогда родителя для инпута.

[Rustam Bainazarov]

Адам Сулумов, лучше перепишите ответ :))

Answer 2

[Александр]

Нужно обернуть input в div и добавить туда элемент иконки. Можно напрямую, либо через псевдоэлементы.
Как пример - https://www.w3schools.com/howto/howto_css_form_icon.asp

Answer 3

[Froggyweb]

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

Answer 4

[ParaBellum577]

как вариант очень простой. Оборачиваешь инпут и иконку в див. Даешь этому диву позишн релейтив. А иконку на абсолют. Потом задаешь иконке top: 10px left/right (это уже опционально).