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

Question

[kn1ght_t]

Если бы текст "наша задача" был на отдельной строке, проблем бы не было

картинка

Answer 1

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

https://jsfiddle.net/webirus/13pp8uve/1/
Хе-хе, интересно было)

Comments

[Сергей delphinpro]

s.delphinpro.ru/20161031-220120.png )

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

Сергей: Ну, можно через em реализовать или через %, тогда не будет смещаться.

Answer 2

[Златослав Десятников]

Как-то так.

Насчёт фразы "наша задача". Её можно сделать position: absolute; background: #fff; и высотой чуть больше строки, чтобы закрывала полосочку.

Comments

[Archakov Dennis]

А как Вы хотите тогда сделать, чтобы у первой строки был отступ от "наша задача"? Я не пойму, что за странный дизайнер, делал это поле.

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

Im Archakov: text-indent: 110px;

[Алексей A]

Im Archakov: Есть в css text-indent для этого.

[Златослав Десятников]

Im Archakov: text-indent, не думал, что такое надо объяснять.

[Archakov Dennis]

Sergey Goryachev: Алексей A: спасибо. Я посмотрел пример Сергея и понял как это реализовывается. Хмм, я думаю text-ident будет для всех строк.