如何在每行的textarea中绘制线条 [英] how to draw the lines in textarea with each rows

问题描述

大家好，

如何在每行的textarea中绘制线条？



i想要显示每一行的每一行textarea，

我该怎么做？

Hi All,
how to draw the lines in textarea with each rows?

i want to show th line with each row in textarea,
How can i do this?

推荐答案

这里有一个很好的解决方案问题..你可以用< b> css ..

下面的样式..

Here is exiting and good solution for you Question.. You can achieve this using css..
Style below..

<style type="text/css">
        .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;
            width:300px;
            height:500px;
        }
        .notes:focus
        {
            outline: none;
        }
        body
        {
            background-color: #eee;
        }
    </style>

Html源..

Html source..

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

你也可以参考下面的链接..

http： //stackoverflow.com/questions/9468153/textarea-with-horizo​​ntal-rule [ ^ ]

http://stackoverflow.com/questions/9468153/textarea-with-horizo​​ntal-rule [ ^ ]

这篇关于如何在每行的textarea中绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！