Remove textarea scrollbars in Internet Explorer

I was delighted to discover this "trick" over on CSS-Tricks in a post titled Textarea Tricks. (See, Chris, I do like you!)

Internet Explorer displays a (completely pointless) inactive scrollbar in empty textarea elements, unlike other browsers which wait until a scrollbar is actually required before displaying it.

As it turns out, there's a dead simple way to prevent this, and once again its everybody's friend overflow to the rescue.

textarea { overflow: auto; }

The overflow property seems to be a magical remedy for a variety of different ailments, most significant of which is the collapsing of an element whose children are all floated. Applying overflow: auto makes the element wrap its children rather than letting them "hang".

One thing that I sometimes ponder, though, is why visible was selected as the default overflow value – it seems inferior to auto in most use cases.

Respond