带水平规则的<textarea> </textarea>

Question

有没有人知道在不使用背景图片的情况下在<textarea>内创建水平规则的方法？

CSS3没问题。如有必要，我可以为IE提供图像后备。

示例：

Answer 1

您可以使用线性渐变来完成此操作：

.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

我认为使用图像是正确的解决方案。

后备：textarea上的透明背景，包装器DIV上的背景图像。