This is a fun textbox, where the text box is created in a notepad style. HTML markup is simple with a form and a textbox, with 4 rows allowed to enter. The CSS styling created the magic of styling this textbox like a notebook with rows. The form defines the font-size and the color of the paper. The entire textbox is styled with properties like width, overflow, line height and padding which gives a perfect picture of the notebook along with to the background images. Enter the words on each line you will notice that the textbox does not come to an end nor there is any word limit to this text box. Here the background image is repeated using the background-repeat property. This decides how the image will be repeated. Make sure the length of the lines.png matches with the textbox as repeating this image will repeat the red margin on the extreme right.
Texts are usually highlighted for quick reading and bettering understanding of the story or concept. This snippet is one which changes the perspective of the text and highlighted text and still maintains the length of highlighted area over the text. Here position of the is placed behind the . Javascript copies the text entered into the to the which is position behind. The container servers as the anchor to position other elements. The highlight is nested within the brackdrop, the is used to highlight the text inside the highlighted . CSS plays important role as it need to be perfect with the pixels of the highlighted and text area. The styles are fixed as different browsers adds different margins. Javascript keeps the text and the marked area in sync, also helps to scroll them in sync.