One of the frustrations of browser testing is that Internet Explorer often renders elements of the page in ways you would never expect. One such example is in scrollbars on textareas. IE (and some other browsers) likes to throw scrollbars into your textareas even when they’re not necessary.

Thankfully, there is a very simple and easy way to fix this.

The Solution

To fix this little annoyance, just add this one line of code to your textarea’s CSS:

textarea {
     overflow: auto;

That’s it! Easy, right? Now the scrollbar will only show when it’s necessary. In other words, it will be invisible until enough text is written in the textarea to grow beyond its bounds, in which case the bar will be shown.

Want to really kill that scrollbar?

Just add this line of code to your textarea’s CSS, and the scrollbar will never be shown, even if the user fills up the textarea!

textarea {
     overflow: hidden;

I wouldn’t recommend doing that unless you have a good reason, though, because you won’t be able to see what you’re typing into a textarea with that CSS. It can be useful sometimes, though. Try it out!