Hello my fellow web developers and designers. Many times while creating a websites we are encountered with problem of not so good looking forms , and on top of that firefox’s built in spellcheck functionality adds to the disgrace by adding red dotted underline to misspelled words , or more appropriately words that are not in firefox’s dictionary. For eg. Have a look at the following “textarea” input field. It is a default textarea field with attributes rows="5” and cols=”40” set. i.e.

1

<textarea rows="5" cols="40"> </textarea>

Do you see the red-dotted underline beneath “textarea” and “smartanuj” , they just are not good. Whatever firefox thinks to me both textarea and smartanuj are correct spellings. So how can i get rid of this problem.

Now here is a another subtle but significantly good looking textarea

You see how the textarea and smartanuj both are free of the red-dotted underlines. Lets see how you can accomplish the same.

To create the above textarea i used the following code.

1
2

<textarea spellcheck="false" rows="5" cols="40" style="border:1px solid #ccc;-moz-border-radius:4px;padding:5px;font-family:Verdana, Geneva, sans-serif;font-size:20px;color:#4B4949">
</textarea>

Lets break down the textarea bits by bits and understand whats going on there

spellcheck="false"

Disables the firefox spellcheck functionality on that textarea

 rows="5" cols="40"

Sets rows and columns of textarea or width and height of the textarea

 border:1px solid #ccc; 

Sets border around the textarea which is 1px in width , solid and has color code #ccc

 -moz-border-radius:4px 

Curves the border around the corners in an arc of radius 4 cms

 padding:5px 

Sets padding 5 pixels , so the characters are some pixels away from the borders

font-family:Verdana, Geneva, sans-serif;font-size:20px;color:#4B4949

Sets font-family to “Verdana , Geneva , Sans-serif ” , the size to 20px , and font-color to color code #4B4949

Isn’t it fairly simple. Important thing to remember , the make the styles inline to give the textarea proper formatting

If you have any questions please use the comments area below