<textarea> con la regola orizzontale

Question

Qualcuno sa di un modo per creare regole orizzontali all'interno di un <textarea> senza utilizzare un'immagine di sfondo?

CSS3 andrebbe bene. Posso scansare un'immagine fallback per IE se necessario.

Esempio:

Answer 1

È possibile farlo utilizzando gradienti lineari:

.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

penso utilizzando un'immagine è la soluzione giusta.

Fallback: sfondo trasparente nell'area di testo, immagine di sfondo su un wrapper DIV.