<textarea> with horizontal rule - html

Question

Does anyone know of a way to create horizontal rules within a <textarea> without using a background image?
CSS3 would be fine. I can bodge an image fallback for IE if necessary.
Example:

Answer 1

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>
JSFiddle Version

Answer 2

.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 3

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

Answer 4

I think using an image is the right solution.
Fallback: transparent background on the textarea, background-image on a wrapper DIV.

Answer 5

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 6

Universal solution
Create two divs with the same styling.
First div is a "mirror" div with color: transparent; position: absolute.
Second div is contenteditable="true", with injected span elements.
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.