Можно стилизовать текстовую область, чтобы каждая строка имела пунктирную подчеркивание (например, блокнот или блок заметок)?
Число строк должно быть зафиксировано, чтобы сказать 10.
Можно стилизовать текстовую область, чтобы каждая строка имела пунктирную подчеркивание (например, блокнот или блок заметок)?
Число строк должно быть зафиксировано, чтобы сказать 10.
Здесь возможно, что вы ищете:
<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>
Чистый 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/
Если вы по-прежнему интересуетесь этой темой, вы можете проверить Бумага Текст Пример области - созданный с помощью CSS только в блоге fivera. Прохладная вещь в том, что вы можете играть с примерами на месте.
Эти решения не поддерживают переполненную текстовую область. Таким образом, прокрутка только прокручивает текст, а не фон. Чтобы поддерживать прокрутку, вы должны добавить " background-attachment: local;" в textarea css.
Прокрутка прерывает каждое решение, полное решение для этого также должно сделать строки прокрутки с текстом. Это трудно сделать, просто добавив фоновое изображение в текстовое пространство.