How can I underline all rows in textarea?

Question

How can I underline all rows in textarea?

I need in something like this.

P.S. Textarea has style padding: 10px

I can\'t you background,

Answer 1

.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;
}

.notes:focus {
    outline: none;
}

body {
    background-color: #eee;
}

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

Answer 2

Universal solution

1. Create two divs with the same styling.
2. First div is a "mirror" div with color: transparent; position: absolute.
3. Second div is contenteditable="true", with injected span elements.
4. Add any border-bottom and padding-bottom

Live Demo

CodeSandbox editor (using Vue, but easy to port to anything else)

Note: Please be careful with contenteditable and make sure you secured it from XSS attacks.

Answer 3

Short answer, it's not possible to format text inside a textarea.

If this is really important I'd suggest using <div contenteditable="true"></div> which allows you to style the text (but it's open to potential abuse from pasted HTML), and then parse our innerHTML to a hidden input field upon submitting your form.

Answer 4

I think that may be a background image. Look up on CSS background or background-image property then assign it the textarea in question.