How to Underline All Rows in Textarea

textarea with horizontal rule

You can do this using linear gradients:

.notes {

    background-attachment: local;

    background-image:

        linear-gradient(to right, white 10px, transparent 10px),

        linear-gradient(to left, white 10px, transparent 10px),

        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);

    line-height: 31px;

    padding: 8px 10px;

}

<textarea class="notes"></textarea>

Textarea with lines under each row of text

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/

Underlining text of a textarea

The approach being used is to hide the textarea and create a div that is editable (add the attribute contenteditable="true" to a div. I'm not too sure of browser compatibility). On every key press the javascript grabs all the content, locates mis-spelled words and puts a span around the offending word. Using css they put a squiggle red underline under the word (an image of a small segment of red squiggle)

Thinking about it, they would need to keep track of the location of the cursor in the div in case the user starts entering text in the middle of the box, so that after altering the contents the script returns the cursor to the correct position and not at the end of the block of content.

Also, you would need to update the value of the textarea on each keypress.

[edit]

Here is a jsFiddle of proof of concept:
http://jsfiddle.net/tEnY8/

Bottom line, when you type into the box, the value is put into the textarea and any incorrect words are underlined and turned red. At the moment it only flags the last word as being incorrect. You need to comment that line out, uncomment the for loop, and implement the isMispelled(String) function.

[edit]

Here is a further proof of concept: http://jsfiddle.net/tEnY8/4/

Basically I've set up an array of correctly spelled words, then the loop checks if the word exists in the array; if it does not then the word is probably mis-spelled.

textarea with horizontal rule

You can do this using linear gradients:

.notes {

    background-attachment: local;

    background-image:

        linear-gradient(to right, white 10px, transparent 10px),

        linear-gradient(to left, white 10px, transparent 10px),

        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);

    line-height: 31px;

    padding: 8px 10px;

}

<textarea class="notes"></textarea>

Custom CSS Form: How to achieve responsive underlined textarea?

You can implement the constant underlines by making a background image that has some blank space and an underline. Then set the image as background of your textarea and have it repeat. Lastly, set the line-height in CSS to be equal to the height of your background. The lines will now repeat along with the height of the text.

For the textarea resizing, you can use TrungDQ's answer or one of many libraries available through Google.

How to underline every line of text, to the end of a block

in your lines that you need to underline add a style="border-bottom: 1px solid #000"(probably on your containing td)

---

Related Topics