Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML
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 12-Dec-12 2:20am
amit_83997
Comments
Krunal Rohit at 12-Dec-12 7:25am
   
like http://stackoverflow.com/questions/2034544/textareas-rows-and-cols-attribute-in-css
amit_83 at 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.
 
Krunal Rohit at 12-Dec-12 7:41am
   
any efforts so far ??
aspnet_regiis -i at 12-Dec-12 9:38am
   
What else do you want Sir ?
Kuthuparakkal at 12-Dec-12 22:42pm
   
put <hr> after each line
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Here is exiting and good solution for you Question.. You can achieve this using css..
Style below..
<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..
<textarea class="notes"></textarea>
U can also refer below link..
http://stackoverflow.com/questions/9468153/textarea-with-horizontal-rule[^]
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 304
1 Sergey Alexandrovich Kryukov 255
2 Shweta N Mishra 216
3 Maciej Los 210
4 PIEBALDconsult 184
0 OriginalGriff 7,660
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,665


Advertise | Privacy | Mobile
Web01 | 2.8.1411023.1 | Last Updated 7 Nov 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100