Как сверстать следующий элемент с элементом Input?

Question

[Никита Смирнов]

Друзья, всем добрый ночи! Я здесь, так же как и в html-верстке.
Прошу Вас помочь в следующем вопросе. Прислали мне тестовое задание по верстке небольшого элемента.
Звучит оно так:

Реализовать поле ввода, как тут: Первая картинка
Должен быть точно такой внешний вид. Фраза "Фильтр заказов" - это placeholder. Как только устанавливаем курсор в поле ввода, эта надпись поднимается вверх над полем (поднимается с анимацией) и поле ввода теперь выглядит вот так: Вторая картинка
Когда вводим текст в поле ввода, это выглядит вот так: Третья картинка

Предоставить html файл (и все сопутствующие файлы стилей или яваскрипта), который отобразит этот элемент - поле ввода.

Не могли бы подсказать как это сделать. Желательно силами css (но у меня ощущение, что без JS не обойтись).

Comments

[Stalker_RED]

А не судьба нормально картинки залить, без изображения всего браузера целиком?

[Алёша]

Для этого нужно мозги иметь.

[alex]

вы не задумывались, что если вы не можете это сделать, то и в компании, что дала вам это тестовое, вы не сможете работать?

[Никита Смирнов]

А ссылки на такой аналогичный код нет случайно?
Мне лично с нуля написать код с использованием JS будет сложно))

[alex]

мы можем за вас поработать, а вы зарплату получать будете

[Никита Смирнов]

Alex: если не можешь по факту что-то полезное сказать, то лучше молчи))
Я в WEB человек новый!

[Сергей delphinpro]

Никита Смирнов: Даже если не завалишь тестовое, один хрен собеседование не пройдешь... Учился бы лучше.

[Никита Смирнов]

Так я скорей всего и могу не пройти и тестовое задание, так и собеседование. Но в любом случае я обучением занимаюсь (в частности прося помощи на данном ресурсе).
Я думаю, что ты был на том же уровне в начале как и я!

[alex]

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

[Никита Смирнов]

Alex: По факту я тебя и не прошу решения этой задачи!
Кто хотел подсказать, то и подсказал! Кто не хотел, тот и не подсказал. И не нужно свою значимость тут поднимать!

Answer 1

[Евгений]

Можно как-то так:
https://jsfiddle.net/w4m2qoya/
Используя focus + valid

Comments

[Никита Смирнов]

Спасибо за коды.
Только пару вопросов буквально. В каких браузерах работает?
Я смотрел в Опере и Хроме и там совсем не то что должно быть. Точней совсем не работает((
И можно ли сделать так, чтобы при наборе текста (не в момент когда я курсор поставил в поле Input, а именно в момент набора текста) цвет поля Input менялся (на зеленый к примеру)?
Подскажите пожалуйста?

[Сергей Горячев]

Никита Смирнов: Везде работает. Linux Mint.

[Никита Смирнов]

Все получилось! Спасибо Вам большое за помощь!

Answer 2

[Ksider]

input:focus + label, а фраза "фильтр заказов" это как раз label

https://tympanus.net/Development/TextInputEffects/

Answer 3

[RUSH23]

Если все верно понял, то вот.
Автор.