Как сделать такую форму поиска?

Question

[nicknamemyname]

Подскажите, пожалуйста, как сделать такую форму поиска?

А именно с лупой внутри

Answer 1

[Кирилл]

Я бы вставил через :after и абсолютно спозиционировал. А при фокусе прятал бы.
P.S. Хотя не, что-то погорячился. Плейсхолдер пропадает когда печатать начинаешь, а не при фокусе. Тогда javascript

Comments

[Сергей delphinpro]

у инпутов нет псевдоэлементов

[Volodimir Babeshko]

Для этого используют псевдоклассы, никакого js там не надо, просто бекграунд и прятать его если фокус в поле

[Кирилл]

Konstantin Abaiev: Плейсхолдер исчезает не при фокусе, а при начале ввода текста. Так же если убрать фокус, то иконка заново появится, независимо введен какой-то текст в инпут, или нет.

[Volodimir Babeshko]

Для этого обычно используют :empty, а если не получается (что не всегда зависит от кривизны рук) то только тогда используют js