Как сделать «всплывающий» плейсхолдер?

Question

[Александр]

Добрый день.
Необходимо сверстать инпут так, чтобы при фокусе плейсхолдер плавно всплывал вверх и становился "лейблом" (а также уменьшался в размере). Соответственно, при блюре, если поле было заполнено, то плейсхолдер так и остаётся наверху; если же поле так и осталось пустым, то плейсхолдер так же плавно опускается на своё законное место.
Пробовал сделать это на костылях с использованием позиционирования, но хотелось бы всё же использовать какой-то более интеллектуальный и универсальный способ, если он существует. Без вашей помощи не обойтись
Спасибо

Answer 1

[Сергей delphinpro]

Рализация плейсхолдеров внутри input'a?
Посмотрите мой ответ там. Как раз по вашей теме.

Answer 2

[123 123]

Используйте только label, таков стандарт и это автоматически делает поле формы более доступным.
Пример: jsbin.com/vaqoxikika/1/edit?html,css,output

Comments

[Александр]

В вашем случае инпут становится некликабельным -- лейбл закрывает поле

[Николай Шабалин]

Александр: ну так добавьте id и for. jsbin.com/duyatirido/1/edit

Answer 3

[Роман]

вместо плейсхолдера используйте спан
<input type="text"/><span>Placeholder</span>
вот с ним вы и сможете сделать все что захотите.
А дальше или селекторами ЦСС или скриптами задаете поведение спана при фокусе и блюре

Answer 4

[zooks]

Вариант исполнения: сделать не плейсхолдер, а именно лейбл, лежащий за полупрозрачным полем.
При фокусе на поле происходит нужная вам анимация и наоборот.

Answer 5

[emiliya sokolova]

Вот пример codepen.io/emilium/pen/qdEMvE