Как реализовать кастомный input?

Question

[Илья]

Доброго времени суток.
Нужно кастомизировать input. Вообще ничего не смыслю в кастомизации, да и нагуглил неособо хорошие примеры.
Нужно реализовать что-то такое:


Буду благодарен за готовую реализацию или хорошую ссылку на мануал. Вопрос даже больше в том, как присоединить кнопку в input.

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

P.S. Цвет - #5bbd9c

Answer 1

[Дмитрий]

Я бы поправил код Антона.

jsfiddle.net/h156po3r/1

Comments

[Anton Filippov]

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

[Дмитрий]

Антон: ну да input:focus + button звучит не совсем здраво. Но это не говорит о моей не компетентности, 28 ответов = 21% решений, против 190 ответов 14% решений ;)

[Anton Filippov]

Дмитрий Пищалка: круто, вот и померились пиписьками)

[Дмитрий]

Антон: тоже об этом подумал :) Не красиво это было с моей стороны, так что прошу прощения :)

Answer 2

[Anton Filippov]

jsfiddle.net/h156po3r

Answer 3

[Дмитрий Шишкин]

Transition забыли))) jsfiddle.net/h156po3r/2
Пора заводить отдельную ветку на гитхабе, уже третья версия пошла))