Notebook Style Textarea using CSS

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

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!

Thanks!

View Live Demo Download