Click here to Skip to main content
15,883,750 members
Please Sign up or sign in to vote.
2.50/5 (2 votes)
See more:
Hi All,
how to draw the lines in textarea with each rows?

i want to show th line with each row in textarea,
How can i do this?
Posted
Comments
[no name] 12-Dec-12 7:25am    
like http://stackoverflow.com/questions/2034544/textareas-rows-and-cols-attribute-in-css
amit_83 12-Dec-12 7:39am    
Thanks for reply.
But this is not my solution. i want the border below of each row as a separated line.

[no name] 12-Dec-12 7:41am    
any efforts so far ??
bbirajdar 12-Dec-12 9:38am    
What else do you want Sir ?
Kuthuparakkal 12-Dec-12 22:42pm    
put <hr> after each line

Here is exiting and good solution for you Question.. You can achieve this using css..
Style below..
CSS
<style type="text/css">
        .notes
        {
            background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
            background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
            background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
            background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
            background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
            background-size: 100% 100%, 100% 100%, 100% 31px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            line-height: 31px;
            font-family: Arial, Helvetica, Sans-serif;
            padding: 8px;
            width:300px;
            height:500px;
        }
        .notes:focus
        {
            outline: none;
        }
        body
        {
            background-color: #eee;
        }
    </style>


Html source..
HTML
<textarea class="notes"></textarea>

U can also refer below link..
http://stackoverflow.com/questions/9468153/textarea-with-horizontal-rule[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900