CSS Styling text areas like notebook-look

Question

It is possible to style a text area so each row have a dotted underline (like a notebook or a notes-block)?

The number of lines should be fixed to lets say 10.

Wonderstricken

Just use a background image? – Portrait

Answer 1

Here's probably what you looking for:

<style type="text/css">
textarea {
 background: url(https://i.sstatic.net/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>

Or you can read this articles that tells you how to do it from scratch:

Creating a Notebook Background

Divulgence

you can add: border: none; that will make it better – Harassed

You can dynamically create an SVG background image based on the line height: #18572803 – Nearsighted

Answer 2

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

the result you can see this link: http://jsfiddle.net/Wolfsblvt/qc9rgm7r/

Prussiate

The link is no longer there, can you upload it elsewhere? – Jerad

That's why you shouldn't use your personal website to upload examples. I think JSFiddle is way more reliable. – Reverential

It takes 5 seconds to do a fiddle on your own. This is one, with the exact code: jsfiddle.net/Wolfsblvt/qc9rgm7r – Anthropomorphic

this is very cool! dynamic line heights, no external file dependency, no extra request! – Armoire

Great solution, thanks! If You want the lines to scroll along with the textarea's contents, add background-attachment: local. – Hereabout

Answer 3

I took the other answer and upgraded it to SCSS to make it configurable. You can now easily change size and color of the holes and rules and everything will size accordingly.

Also, I added another example that uses an editable div instead of a textarea.

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

Unfortunately, Stackoverflow doesn't support SCSS, so I just included a snapshot of one fixed configuration here:

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #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 19px, #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% 20px;
  background-size: 100% 20px;
}

<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>

Neddra

Answer 4

These solutions don’t support overflowing textarea. So scrolling only scroll the text not the background. To support scrolling, you should add “background-attachment: local;” to the textarea css.

Weingartner

This was what I needed to use with the accepted answer here #28665659 – Stacked

Answer 5

If you are still interested in this topic you can check the Paper text Area examples - created with css only on fivera's blog. Cool thing about it is that you can play with the examples on the spot.

Hade

It's best not to rely on a link to another webpage when answering a question. You can't be sure that the link will always be accessible. – Oversubscribe

Answer 6

Scroll breaks every solution, a complete solution for this should also make lines scroll with text. This is difficult to accomplish just by adding a background image to a textarea.

Ohara