web magazine and more…

CSS Textarea Style – Quick n’ Easy

I’m not sure why, but so many sites seem to ignore their horrible CSS textarea style. How many times have you used a textarea that had zero padding? or even worse, it used the default “Times New Roman” font because the designer was too lazy too fix it?

Well this article is going to be a quick example of a nice textarea styled with CSS. There is no reason why this should be hard to do, as it literally takes 2 minutes to put together.

Let’s get started. First we have our textarea:

Just a couple things to note here… First off, try and make sure there are no extra spaces between the start of the textarea tag and the end. In my experiences having any space will sometimes cause the textarea to be pre-filled with spaces, which is both annoying and confusing when you’re trying to fill out a form. Second, you almost always want to give your textarea an id, you’ll need it to target with the label.

Next up some CSS styles:

#commentBox {
     display: block;
     width: 400px;
     height: 120px;
     padding: 8px;
     border: 1px solid #cccccc;
     line-height: 130%;
     font-size: 13px;

What we end up with is a nice standard textarea that can be customized to fit whatever theme you need. It should look like the example textarea below:

So thats it! Only 7-10 lines of CSS for a basic but nice looking textarea. From here it would be really easy to customize this with background-images, fancy borders, different colors, jQuery hover states, or whatever else you think would look nice.

posted by admin in Tutorials and have No Comments

Place your comment

Please fill your data and comment below.
Your comment