Как сделать такой input?

Question

[Jedi]

Добрый день!

На сайте Apple наткнулся на такое чудо форму...


До клика в поле "Имя", label находится по центру input, а после клика происходит то, что вы видите :)

Я использую Bootstrap у себя в проекте. Не подскажите, как мне сделать такую же красивую анимацию?

Буду очень признателен!)

Answer 1

[WapSter]

Держи. Вот еще вариант на нормальном css без фигни

Comments

[Rustam Bainazarov]

CSS лучше не использовать, потому как такой подход нормально не работает с type="email" (и ещё каким-то):
https://codepen.io/anon/pen/zeyWpm

Попробуйте ввести неправильный адрес с точки зрения браузера — лейбл налезет на поле.

[WapSter]

SmthTo, в принципе все что отвечает за состояния форм полей ввода лучше делать на js. Но просто можно посмотреть на этот css код и применять его через js

[Rustam Bainazarov]

Тимур Турсунбаев, согласен с вами.

[Ankhena]

SmthTo, с виду рабочий вариант и с email https://codepen.io/anon/pen/yZGEgY
placeholder можно не показывать совсем, а можно, как будто мы хорошие, и показать.

[Rustam Bainazarov]

Ankhena, эх, EDGE и IE в пролёте с :placeholder-shown. В Safari ещё был какой-то баг год назад с ним.

[Ankhena]

SmthTo, к сожалению так

[WapSter]

ms опять все прелести css испоганило)

Answer 2

[yarnstart]

чистый css - https://jsfiddle.net/8mc425hp/1/