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

Question

[Дмитрий Смирнов]

Друзья, дайте, пожалуйста, наводку, как сверстать такой инпут.

Конкретно вопроса 2:
1. Как добавить подпись внутри инпута?
2. Как сделать так, чтобы при заполнении справа появлялся крестик, который очищает поле?

Comments

[Ankhena]

Два span'а рядом с input.
При фокусе JS'ом добавляете класс или классы с соотвествующими вашим желаниям свойствами.

[Александр Лысенко]

Псевдоэлементы :before и :after и дальше с помощью position: absolute творите с ними что хотите

[Растишка]

AlexanderZe:
1) Для инпута нельзя делать сделать псевдоэлементы
2) на псевдоэлемент нельзя повесить обработчик эвента (очистка)

[Froggyweb]

цифры инпут остальные блоки имитация при клике на крест js - сброс value инпута
enter email сделал бы через label

[Александр Лысенко]

Растишка: Вы правы, совсем забыл об этом.

Answer 1

[Антон Шейкин]

1. Анимированный label вместо placeholder'а — https://codepen.io/sivan/pen/alKwf
2. Обычный span (а лучше кнопка) с крестиком внутри, показывать/скрывать можно и без помощи JS — https://codepen.io/peiche/pen/ORRkKw

UPD: учти, что в примерах используется SCSS, если возьмешь за основу - переведи в обычный CSS.

Comments

[Дмитрий Смирнов]

Спасибо)
Хотел проверить, работает ли первая анимация в IE11, но в нем даже codepen не работает)))

UPD: увидел, что там даже IE10 поддерживается

[Yury Bondaruk]

Вы невероятный гений, Антон :)

Answer 2

[Артем]

https://codepen.io/sevilayha/pen/IdGKH
ну и в целом materializecss.com/forms.html

Comments

[Froggyweb]

И как это решает задачу? куча бесполезного кода для красоты. где очистка input?

[Артем]

Эта вся штука, которую Дмитрий Смирнов спросил, называется Material design.
Собственно, скинул примеры того, как это сделано.