Как впихнуть декоративный элемент (иконку лупы) в поле input?

Question

[Persotr27]

Здравствуйте. Мне нужно сделать поле для поиска, и что бы оно содержало внутри себя помимо плейсхолдера, иконку лупы, и что бы та при нажатии на поле, меняла стиль. Как такое можно реализовать? пример

Answer 1

[Stockholm Syndrome]

https://codepen.io/anon/pen/QXPYKb

Answer 2

[Максим]

Собственно не сложно
Делаем input="search" + иконка лупы"
Оборачиваем оба элемента в div
Потом у input="search" убираем outline и border
А div border добавляем
Делаем border-radius
Скрываем крестик который есть только в IE и в Chrome
И получаем результат : https://codepen.io/topicstarter/pen/PrggwO

Answer 3

[painmaker]

"Окружить" инпут див-ом и впихнуть рядом, либо стилизировать сам инпут, а иконку воткнуть через псевдо-селектор after/before. вот пример первого варианта https://codepen.io/anon/pen/ewowRL