Как подвинуть лупу НА padding?

Question

[Мистер Помогитепожалуйста]

Здравствуйте, как я могу передвинуть блок, который я обозначил оранжевой рамкой, на инпут?
Короче лучше показать, чем объяснить:
Вот мой:

my example

А вот пример с оригинального макета в фигме

пример с фигмы

Как сделать так же? Если нужны стили дополню вопрос, спасибо за внимание
P. S и ещё: я пробовал раньше двигать лупу, но инпут двигался вместе с лупой и лупа не входила в него

Comments

[Ankhena]

Гридами
Абсолютами

Answer 1

[Dymok]

Задать инпуту и лупе общий родительский элемент, ему position: relative, лупе position: abosulte и спозиционировать правильно, инпуту левый паддинг еще.

Comments

[TtT RrR]

или псевдоэлементом, в стилях указать ему background: url(путь иконки) и т.д.

Answer 2

[podushka]

https://codepen.io/username_treesh/pen/gOdwdbO