Как можно правильно реализовать такой placeholder?

Question

[ravlex]

Как можно правильно реализовать такой placeholder? Или же это обычный блок с absolute который пропадает при клике?

Comments

[ravlex]

Скрин из фотошопа.

[display: block]

Блок с absolute.

[ravlex]

qork: а как сделать так, чтобы при клике по инпуту для ввода текста, оно пропадало? И если инпут пустой, чтобы блок снова отображался. Имитировать плейсхолдер в общем.

[Aslan]

ravlex: focus и display none

[Snewer]

ravlex: на jQuery можно сделать, например.

[OVK2015]

Есть похожий documentcloud.github.com/visualsearch

Answer 1

[Андрей Б.]

один из способов https://jsfiddle.net/r1wtjrys/

Comments

[Roman]

С :focus не совсем правильно

[Андрей Б.]

Роман да в верстке вообще много чего "не совсем правильно"

Answer 2

[nelolka]

ПКМ -> Просмотр кода элемента.
Разумеется, это ненастоящий плейсхолдер.

Comments

[ravlex]

Это скрин из фотошопа, мне нужно это реализовать.

Answer 3

[Roman]

Можно так: https://jsfiddle.net/82crmxLd/

Только нужно учитывать, что :valid работает не везде