Как сделать label внутри input?

Question

[Denis]

Как сделать вот такой label или placeholder внутри input, чтобы он не исчезал

Answer 1

[Quber]

Для label используйте css:
margin-bottom: -20px;
Для input:
height: 80px;

Можно и по другому сделать конечно. Не забудьте посредством for и id атрибутов привязать элементы друг к другу.

Comments

[Denis]

да, как вариант подходит, спасибо

Answer 2

[Сергей Мельников]

jsbin.com/lanuqi/1/edit?css,output

tympanus.net/codrops/2015/01/08/inspiration-text-i...

Comments

[Denis]

а почему так не получается? codepen.io/dennyjuice/pen/NPjRYW
просто у меня там два инпута + чекбокс и сабмит, если прям вашим кодом, то тоже не так работает

[Сергей Мельников]

Denis: дело в css селекторах, я использую оператор +, что значит, элемент, который идет непосредственно после данного (пример: div + p - параграф, который идет сразу за div ), иначе не получится

[Denis]

Сергей Мельников: Спасибо большое:), вот что получилось: codepen.io/dennyjuice/pen/NPjRYW?editors=110

[Сергей Мельников]

Denis: круто)

Answer 3

[Дмитрий]

это не Input, а составной блок - таблица, дивы и т.д. так будет проще.

Comments

[Quber]

могу осмелиться предположить, что в примере любая область блока кликабельная. С div чтобы так сделать, прийдётся с геммороем поработать. мой вариант легче и проще.

[Дмитрий]

Quber: ну да, логично. а как раскрасить - это уже один вариант из... )

[Тимофей]

Quber: Можно весь блок обернуть в label, а в него уже пихнуть инпут и подпись в спане. В итоге вся эта хренотень будет кликабельной. Собсвтенно, сам этот лейбл и его содержимое вполне можно сделать как на картинке и не будет семантически лишней разметки.