Notebook Style Textarea using CSS

Last modified on by Karthikeyan K

In this tutorial I want to explain about how to design a Notebook Style Textarea with CSS. This is basic level tutorial I have used small notebook image to achieve the trick.

You will really feel like typing texts in a notebook instead of normal textarea.

With few lines of css code, you can implement this in any web forms

NoteBook Style Textarea using CSS

CSS Code

textarea.notebook {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 700;
width: 100%;
padding: 5px 0px;
margin-bottom: 20px;
resize: vertical;
font-size: 11px;
line-height: 24px;
border-bottom: 2px solid;
-webkit-appearance: none;
border-radius: 0;
background: url(notebook.png);

You can modify the notebook.png line color based on your website design.

HTML usage

<textarea class="notebook" rows="7" cols="60">Type here...</textarea>

Simply apply the classname .notebook to any textarea to replicate this awesome notebook style.

I hope you will like this tutorial. You can use this code in your live projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!


View Live Demo Download

You May Also Like

1 Response

  1. Mombu says:

    it was awesome effect, I try to change some background color for notebook.png by photoshop, it was great.
    I m using RGB(255,246,145) and multiply, I love this effect and CSS

    thanks bro.

Leave a Reply

Your email address will not be published. Required fields are marked *