Как сверстать форму?

Question

[Петр Петров]

Как лучше сверстать такую форму?

Я сделал так: в фотопоше удалил строку поиска и кнопку, получил это:
Потом получившуюся картинку задал в css через свойство background-image. Но мне кажется это не лучший способ. Можно ли как-то по-другому?

Answer 1

[Алексей Сол]

Лупу вырезаете отдельной картинкой. Структура примерно такая.

<div class="form">
  <input type="text">
  <button></button> <!-- или div с классом button, или input submit -->
</div>

Центрируете по правому краю либо с помощью inline-block, либо флексами. Лупу ставите как background: #000 url('loop.png'); позиционируете с помощью background-position.

Answer 2

[twobomb]

Подправь, добавь свою картинку и цвета...

Answer 3

[Александр Аксентьев]

тут вся картинка черный фон, какой нафиг background image.

Кроме лупы ничего не надо делать картинкой, ну и стрелочку(только стрелочку, без фона) если она какая-то особенная.

Answer 4

[Worddoc]

Здесь flex space around