Как сверстать такой input?

Question

[Гриша Никольский]

Как сверстать такой input?


Использовать извращение типа :after для placeholder, а потом еще и как-то позиционировать его справа (не знаю, возможно ли так) или можно как-то проще?

Заранее спасибо!

Answer 1

[sergey]

jsfiddle
сделал на ходу, просто в коде, где иконка лупы,

.search__submit {
background: url("./иконка лупы") 0 0 no-repeat;

поставьте путь к вашей иконке с лупой - и вуаля.

Answer 2

[iBird Rose]

всмылсе? зачем тебе placeholder справа? там обычная кнопка поиска стилизованная также как сам инпут и без бордера слева

Answer 3

[GoodProject]

У меня в одном из проектов иконка через background-image инпута выводится, вариантов как это сделать очень много, тот же самый label или через псевдоэлемент :after у инпута, но через bgi быстрее, + нужно спозиционировать через bg-position.

Пример:
background-image: url(../img/search_icon.png);
background-repeat: no-repeat;
background-position: 170px 7px;