Как поместить изображение в строку поиска? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь вставить изображение в строку поиска, но не могу понять, в какую строку вставить изображение. Еще я пробовал вставить его отдельно с помощью trancform:translate. Но изображение размещается поверх текста, мне нужно, чтобы изображение было слева, а текст в строке поиска справа от него. Картинка прилагается.
Может, без картинки можно? Я программирую на Visual Studio Code.
Мне не нужно ставить эту картинку в качестве фона! Он должен находиться в том же блоке, что и строка поиска.
HTML:

Код: Выделить всё

[i]

[img]ctatic/img/lupa.png[/img]
[/i]

CSS:

Код: Выделить всё

.rect {
display: flex;
width: 1668px;
height: 50px;
background: #959595;
margin:0 auto;
border-radius: 20px;
transform: translate(0,-25px);
}

.search .txtsearch{
background-color: #373737;
border-radius: 50px;
transform: translate(10px,9px);
width: 350%;
display: inline-block;
height: 30px;
}

.txtsearch{
position: relative;
}

.txtsearch img{
position: absolute;
top: 0px;
left: 0px;
}

.search img{
float: left;
position: relative;
left: 20px;
top: -20px;
max-width: 22px;
}

Вот так должно быть:


вот как это происходит с этим кодом:




текст в строке поиска: Поиск режима

Подробнее здесь: https://stackoverflow.com/questions/793 ... search-bar