Как поместить в input иконку?

Question

[Crushing]

Как в инпут поместить иконку?

prntscr.com/gevmr9

Answer 1

[Lander]

Если прям иконку в input, комбинируйте свойства background-image, background-position и background-repeat для инпута.

Answer 2

[Руслан Галиев]

А почему вы хотите поместить кнопку в input, а не сделать кнопку с иконкой справа от input и придать кнопке тот же вид, что и у input?

Answer 3

[iBird Rose]

там не просто иконка. это скорее всего даже кнопка.
создать кнопку рядом с инпутом и поставить ее абсолютом туда.
p.s. не забудь задать инпуту padding-right на величину кнопки.

Answer 4

[Bender_Render]

через :before
https://jsfiddle.net/dzen_is/tw4ov9w7/

Comments

[Вадим Кот]

А потом появится очередной вопрос на тостере
Как сделать так чтобы в firefox псевдоэлемент :before заработал у input? Есть какие-нибудь костыли?
Почему не работают псевдоэлементы у тега input?
Почему не работает стилизация radio и checkbox через использование псевдоэлементов :after и :before в Firefox?
Почему :after съезжает с чекбокса на Android (miui)?

[Bender_Render]

vadimkot: Они всегда появятся, какой бы способ реализации не выбрать и всегда будут клиенты у которых что то не работает, там где оно просто обязано работать.

[Вадим Кот]

Bender_Render: В таком случае стоило бы упомянуть о поддержке браузерами псевдоэлементов для инпутов.

[Bender_Render]

vadimkot: Я предложил вариант решения проблемы, а не решение всех проблем.