Skip to main content

How to Remove Textarea Scrollbars in IE

By Craig Buckler

JavaScript

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

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.

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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?