<textarea> với quy tắc ngang

Question

Có ai biết cách tạo quy tắc ngang trong một <textarea> mà không sử dụng hình nền không?

CSS3 sẽ ổn. Tôi có thể gửi một hình ảnh dự phòng cho IE nếu cần thiết.

Ví dụ:

Answer 1

Bạn có thể làm điều này bằng gradient tuyến tính:

.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

Tôi nghĩ rằng sử dụng một hình ảnh là giải pháp đúng.

Dự phòng: nền trong suốt trên vùng văn bản, hình nền trên DIV trình bao bọc.