Как нарисовать внутри input кнопку с иконкой?

Question

[Никита Нафранец]

Доброй ночи всем, встал в тупик и не могу сдвинутся. Нашел кучу уроков, но не получается сделать, то что мне надо.

Как это реализовать? Заранее спасибо.

Answer 1

[Anton Filippov]

Это не внутри, а рядышком.
Как вариант так.

Comments

[Никита Нафранец]

Я все же смог реализовать рядышком.
Но у меня просто килограмм кода, когда у вас пару строчек. Можете, помочь понять, почему у меня его так много?
Мне пришлось через relative править, чтоб красиво получилось. Оно работает, но выглядит как обычный велосипед.
Честно говоря, я не могу понять как у вас так легко получилось.
У меня мой код на странице нормально отображается, но на codepen жесть какая-та codepen.io/anon/pen/XXjXZw и как избавиться от мелкий отступов? там не маргина нет, но отступ есть... Приходится все вручную

[Anton Filippov]

Dimensi: если честно - даже не хочется лезть в дебри вашего кода)))) отступы появляются, потому что пробел между кнопкой и инпутом стоит, у меня это решено нулевым фонт-сайзом на контейнере

[maxfox]

Dimensi: Используйте flexbox, тогда не нужны будут хаки с нулевым размером шрифта. Отступы - результат использования inline-block, если возможно использовать flexbox, то лучше все делать на нем.

[Anton Filippov]

maxfox: ух ты, и правда, обновил pen

[Никита Нафранец]

Антон Ф.: Спасибо вам, ваш ответ идеально помог мне. Надо мне прочитать про этот flex ибо очень годная штука на мой взгляд)

[Anton Filippov]

Dimensi: maxfox -у тоже спасибо)

[maxfox]

Dimensi: Вот отличный мануал на русском frontender.info/a-guide-to-flexbox
Антон Ф.: Да не за что.

Answer 2

[Павел Беляев]

1. Делаешь так, чтобы кнопочка появилась ровно правее поля ввода
2. для кнопки можно задать position:relative;left:-50px; она сместится относительно своего положения, но вообще инпут и кнопку в один див засунуть с position:relative, а для кнопки абсолютное позиционирование и right:0; (ну или чуть побольше)

Comments

[Kostya Gorozhanov]

Зачем делать все через position?

[Павел Беляев]

Kostya Gorozhanov: а вы как предлагаете накладывать элементы друг на друга?

[Kostya Gorozhanov]

Так а за чем друг на друга накладывать?
По крайней мере в данном примере в этом нет потребности.

[Павел Беляев]

Kostya Gorozhanov: ну да, вы правы, просто у меня на сайтике именно иконка внутри инпута, но тут да, оно впритык может просто встать.