CSS Стили текстовых областей, таких как ноутбук

Можно стилизовать текстовую область, чтобы каждая строка имела пунктирную подчеркивание (например, блокнот или блок заметок)?

Число строк должно быть зафиксировано, чтобы сказать 10.

Ответ 1

Здесь возможно, что вы ищете:

line

<style type="text/css">
textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>
<textarea>
    Textarea with style example
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Line 6
    Line 7
    Line n
</textarea>

Ответ 2

Чистый CSS3

<style>
    html{ height: 100%; }
    body
    {
        background-color: #f5f5f5;
    }
    textarea
    {
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Marck Script',cursive;
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 
        background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }
</style>

В результате вы можете увидеть эту ссылку: http://jsfiddle.net/Wolfsblvt/qc9rgm7r/

Ответ 4

Эти решения не поддерживают переполненную текстовую область. Таким образом, прокрутка только прокручивает текст, а не фон. Чтобы поддерживать прокрутку, вы должны добавить " background-attachment: local;" в textarea css.

Ответ 5

Прокрутка прерывает каждое решение, полное решение для этого также должно сделать строки прокрутки с текстом. Это трудно сделать, просто добавив фоновое изображение в текстовое пространство.