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

Ответ 1

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

<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/

Ответ 3

Если вы по-прежнему интересуетесь этой темой, вы можете проверить Бумага Текст Пример области - созданный с помощью CSS только в блоге fivera. Прохладная вещь в том, что вы можете играть с примерами на месте.

Ответ 4

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

Ответ 5

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