How to Remove Textarea Scrollbars in IE

August 20, 2010

This is possibly the quickest CSS tip I’ve ever posted, but who wants complex tutorials on a Friday! When you’re using a form textarea, Internet Explorer always shows a scrollbar even when it’s unnecessary…

IE textarea scrollbar

A scrollbar doesn’t appear in Firefox, Chrome, Safari or Opera. It’s pointless and a little ugly too — especially when the textarea is surrounded by standard input boxes. It never really bothered me: I just assumed that’s what IE did and never questioned it further.

The fix seems blindingly obvious now:


textarea
{
	overflow: auto;
}

It’s as simple as that. A scrollbar will only appear when the content in the textarea exceeds the space available. It works in IE6, 7 and 8 — view a demonstration.

Please accept my apologies if you’ve been doing this for many years, but it’s one of those useful little CSS tricks which must have passed me by! I hope it helps someone.

Tags: form

Craig Buckler

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

W2ttsy

Thanks for that craig. I didnt even think of that! Its now a tool in my box of tricks :D
halil

I’m in the camp that have been using this for years, and I was thinking that it was a well known trick. Looks like it isn’t :) Or, count that for the lack of sharing.
vitorhsb

Wow. I have already put this in my reset.css file. Thanks a lot.
Anonymous

Are you kidding me? a blog post about this very old thing? what a waste of time sitepoint has become.
- http://www.optimalworks.net/ Craig Buckler
  
  I’m sorry you feel that way, but we cater for designers and developers at all levels. No one can know everything and I admit I wasn’t aware of the fix even after 15 years of web development experience!
- egenius
  
  Before commenting, did you look at the ones that were posted prior to yours?
  
  Some people actually found the post useful. As they say “If you have nothing nice to say, say nothing at all”.
- beebs93
  
  Screw ’em and the horse he rode in on. It just goes to show SitePoint members aren’t afraid to be ridiculed in an attempt to pass along a possibly overlooked trick that has probably frustrated many developers.
http://www.facebook.com/people/Ricky-Duckworth/1533079619 Ricky Duckworth

Yep, I thought this trick had been around ages as well – good to see it posted though, and this site got it into the boilerplate after all..

Recommended for you

Next Article 10 Best jQuery and HTML5 WYSIWYG Plugins