Textarea with lines under each row of text

Question

How can I design a textarea with lines under each row of text like the image below:

enter image description here

score 5 · Accepted Answer · answered Nov 19 '13 at 12:22

5

I have created this for you in jsfiddle, is this what you are looking for?

<style>
._ta { 
    background-color:#AADDF2;
    padding:10px;
}
._ta textarea { 
    background: transparent url(http://s24.postimg.org/62v2ipx81/underline.png) repeat; 
    border:none;
    height:150px;
    width:300px;
    overflow:hidden;
    line-height:30px;
    font-weight:bold;
    color:#FF9900}
</style>


<div class="_ta">
        I like my name because:<br />
<textarea></textarea>
</div>

demo: http://jsfiddle.net/TV47t/1/

answered Nov 19 '13 at 12:22

wf4

3,727
2
34
45

it will need a slight alteration on the css to handle the overflow but its a good, simple working example for you. – wf4 Nov 19 '13 at 12:26
@Er.KT you will need to tweak the `line-height` and the size of the line spacing on the background image, once you type more lines than you can see, the text will move up and will be out of sync with the lines... by getting the correct line-height and image size you will be able to have it looking nice ;-) – wf4 Nov 19 '13 at 12:51
thanks buddy, i think here in ._ta textarea {overflow:auto;} will be better – Er.KT Nov 19 '13 at 13:20
One issue here is when you enter text more then 5 lines then at the time of moving up text align breaks,so please help me to fix this – Er.KT Nov 21 '13 at 05:04
That was what my last comment suggested. You just need to fiddle with the line height and the size of the background image then it will be ok. I'm away from the office today but could take a look for you tomorrow :-) – wf4 Nov 21 '13 at 09:52

score 2 · Answer 2 · answered Nov 19 '13 at 12:02

2

Use background-image or CSS gradients to achieve what you are looking for.

answered Nov 19 '13 at 12:02

Nitesh

15,425
4
48
60

am thinking the same but in the case of background-image may will get problem of font size – Er.KT Nov 19 '13 at 12:03
No. You have to keep a div with background image and under that create textarea. – Nitesh Nov 19 '13 at 12:04
but how to manage small later here like "p", now here half part of p goes under the line and half above the line so now how to manage this? – Er.KT Nov 19 '13 at 12:15
Set background pattern with lines (resize related) then set `font-family`, `font-size` and `line-height` for text. – Milan and Friends Nov 19 '13 at 12:21
when you make the text area, you have to position the div and textarea accordingly, so that it makes the accommodation for every character in the way as mentioned in the image along with `font-size`, `line-height` and other CSS attributes. - @Er.KT – Nitesh Nov 19 '13 at 12:22

Textarea with lines under each row of text

2 Answers2

Linked